Vue项目启动过程以及配置
我们点击 npm run dev 的时候，这就是启动 Vue 工程项目，那么它启动过程是什么样的呢？ Vue 项目启动过程，本文简要介绍。
在执行 npm run dev 的时候，会在当前目录中寻找 package.json 文件，包含项目的 名称版本 、 项目依赖 等相关信息。
从下图中可以看到， 启动 npm run dev 命令后，会加载 build/webpack.dev.conf.js 配置并启动 webpack-dev-server 。
webpack.dev.conf.js 中引入了很多模块的内容，其中就包括 config 目录下服务器环境的配置文件。
可以看到，在 index.js 文件中包含服务器 host 和 port 以及入口文件的相关配置，默认启动端口是 8080 ，这里可以进行修改。
index.html 的内容很简单，主要是提供一个 div 给 vue 挂载。
main.js 中， 引入了 vue 、 App 和 router 模块， 创建了一个 Vue 对象，并把 App.vue 模板的内容挂载到 index.html 的 id 为 app 的 div 标签下， 并绑定了一个路由配置。
上面 main.js 把 App.vue 模板的内容，放置在了 index.html 的 div 标签下面。查看 App.vue 的内容我们看到，这个页面的内容由一个 logo 和一个待放置内容的 router-view ， router-view 的内容将由 router 配置决定。
查看 route 目录下的 index.js ，我们发现这里配置了一个路由， 在访问路径 / 的时候， 会把 HelloWorld 模板的内容放置到上面的 router-view 中。
HelloWorld 中主要是一些 Vue 介绍显示内容。
所以，页面关系组成是 index.html 包含 App.vue，App.vue 包含 HelloWorld.vue 。
到这，我们开始安装 router 、 vuex 。
Ctrl+C 退出启动，继续执行 vue-cli ，脚手架安装插件 router 和 vuex 开始。
输入一个大写Y，按下Enter
vuex 是专门为 Vue.js 设计的状态管理库，以利用 Vue.js 的细粒度数据响应机制来进行高效的状态更新。
Vuex 主要有五部分：
① 安装 vuex
接下来我们在 src目录 下创建一个 vuex 文件夹
并在 vuex文件夹 下创建一个 store.js 文件
文件夹目录 长得是这个样子
在保证我们处于我们项目下，在命令行输入下面命令，然后，安装 vuex 。
② vuex 的关系图
③ 开始使用，在 mian.js 中，引入 vuex
④然后告知 vue 开始使用 vuex (Vue.use(Vuex))
在 store.js 文件中，引入 vuex 并且使用 vuex ，这里注意我的变量名是大写 Vue 和 Vuex
⑤接下来，在main.js中引入store
到这里算是，以及完成了。
我们再重新看一下此时的项目结构，多了router.js和store.js，其它相关的文件也被修改
vue项目运行后显示需要配置
vue项目运行后显示需要配置原因是配置不够。根据相关公开信息显示：配置Vue的app项目首先需要配置本地环境，本地配置即移动端配置过低会显示需要配置，故vue项目运行后显示需要配置原因是配置不够。
关于vue中配置代理请求（配置跨域）
刚接手个项目，上手的时候想看下请求接口:
那尼？为啥是localhost。。。当时我的心里真的是有一万只草泥马在奔腾，因为之前只是看过，没有真实的使用过，第一次碰到的时候，心里还是懵逼的，现在基本熟悉之后，把配置代理这一块整理一下吧。
配置代理分两种情况吧，一种是可以看到config文件夹的，另一种当然就是不可以看到文件夹的啦，我下面就对这两种情况具体说一下吧。
在文件夹之内默认的应该有这三个文件：
在index.js文件内找到dev的配置：
当没有config文件夹的时候，用编辑器打开的时候会看到下面的文件：
重点还是看vue.config.js，打开配置文件的时候,在文件内部有devServer的配置：
Vue 项目创建基础配置
Vue 项目创建时候的一些基础配置小记：
CLI 即 @vue/cli 全局安装的 npm 包用于终端提供 vue 相关的指令，可用来创建工程、启动服务等；
CLI service 即 @vue/cli-service 开发环境的依赖，构建于 webpack 和 webpack-dev-server，可用来serve 启服务、编译构建 build 工程、配置 css、配置 webpack 等；
CLI 插件可以集成一些架包快速配置项目等；
项目创建，cd 到指定的目录下，执行
创建项目 create 后会有几个配置选项，具体如下：
1.use history mode for router - Y
即 vue-router 利用浏览器自身的 hash 模式和 history 模式特性实现前端路由
其中 hash 模式浏览器 url 地址中会带有 # 号，而history 则利用 html5 的 history interface 中新增的 pushState 和 replaceState 方法
2.Pick a CSS pre-processor - stylus
SCSS/SASS：scss 是 sass3 的新语法，完全兼容css3 且继承于 sass；sass 需 ruby环境，在服务端处理
LESS：借助 node.js 通过编译处理输出 css 至浏览器，同时兼容客户端与服务端运行
Stylus：用于给 node 项目进行 css 预处理支持，stylus 功能上更加强壮和 js 关系更加紧密
3.Pick a linter / formatter config - ESLint + Prettier
ESLint with error prevention only: 仅错误预防
ESLint + Airbnb config
ESLint + Standard config: 标准模式
ESLint + Prettier: 使用较多，推荐
4.Pick additional lint features - Lint on save
(·) Lint on save：保存即检查
( ) Lint and fix on commit： fix 和 commit 的时候才检查
5.Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys) - In dedicated config files
In dedicated config files：独立文件中放置
In package.json：放在 package.json 中
6.Save this as a preset for future projects - N
是否记录本次创建工程的如上配置选项并起个名称
安装时可能需要的一些资源： nodejs 、 Homebrew
以上便是此次分享的全部内容，希望能对大家有所帮助！
vue 配置
node_modules 依赖包
public 静态资源托管
src 源码
.eslintrc.js 语法规则配置
.gitignore 源码托管过滤文件
babel.config.js 高级语法配置
package.json 项目配置文件
傻瓜式
手动配置
github
gitee
gitlab
在可视化的ui面板中，通过 控制台 和 分析 面板， 可以方便的查看存在的问题
configureWebpack 通过对象形式操作
chainWebpack 通过链式形式操作
在vue.config.js中配置devServer的proxy属性
在vue.config.js中配置devServer的before属性