vue-cli 3.0 创建项目

一、vue-cli3.0初始化

安装@vue/cli
注意：vue-cli3.0需要node8.9或更高版本（推荐8.11.0+）

 npm install -g @vue/cli
// 或者
 yarn global add @vue/cli

安装后，可检查其版本：
使用vue --version【注意：符号为双 “ - ”】或者vue -V【注意：此处是大写 “ V ”】
-V，-- version ——版本输出版本号
-h，-- help ——帮助输出使用信息
如图：

注：
若此时，仍需要用vue-cli 2.x版本语法（vue init），需下载一个桥接工具：

npm install -g @vue/cli-init

如图：


否则，会有如下提示：

Command vue init requires a global addon to be installed.
命令vue init 需安装一个全局插件。
please run npm install -g @vue/cli -init and try again.
请运行 npm install -g @vue/cli -init ，然后重试。

二、创建项目

vue create '项目名称'

• 请选择预设:(使用方向键)
  >默认值(babel, eslint)
  手动选择功能

此处，我们可以选默认的包含了基本的Babel+ESLint设置的preset，也可以选手动选择特性来选取需要的特性。
默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的，下面以 ”手动设置“ 为例。
注： 按<上下键>移动，按<space>进行是否选定【空格键选择】，按<a>切换所有，按<i>反转选择

1. Babel : 将ES6编译成ES5
2. TypeScript: javascript类型的超集
3. Progressive Web App (PWA) Support: 支持渐进式的网页应用程序
4. Router: vue-router
5. Vuex: 状态管理
6. CSS Pre-processors: CSS预处理
7. Linter / Formatter: 开发规范
8. Unit Testing: 单元测试
9. E2E Testing: 端到端测试

而后：

• 路由器使用历史模式?(需要为生产中的索引回退设置适当的服务器)(Y/n) n

• 选择一个CSS预处理程序(默认支持PostCSS、Autoprefixer和CSS模块):(使用箭头键)

我选择的是node-sass

• 你更喜欢将Babel、PostCSS、ESLint等配置放在哪里?(用箭头键)
  在专用配置文件中的>
  在package.json

这个都可以选，我选择的是第一个专用配置文件

• 把这个作为将来项目的预置?(y / N)
  意思就是是否保存本次设置，我选择n，方便我下次创建项目重新按需设置。

而后：开始生成项目

• 初始化git存储库……
  CLI安装插件。这可能需要一段时间…

哈哈，我报错了，不过，不用惊慌，这是网络问题，重新npm i 即可。

三、下载完成，启动项目

【回顾：vue-cli 2.0 运行项目使用命令：npm run dev】

进入创建好的项目中，运行项目

cd '项目名称'
npm run serve
//或者
yarn serve

运行打开后，如图：

四、项目结构

|-- dist                       # 打包后文件夹            
|-- node_modules               # 第三方包，依赖的包文件      
|-- public                     # 静态文件夹                                   
|   |-- favicon.ico                
|   |-- index.html                     #入口页面
|-- src                        # 源码目录         
|   |--assets                          # 模块资源
|   |--components                      # vue公共组件
|   |--views                         
|   |--App.vue                         # 页面入口文件
|   |--main.js                         # 入口文件，加载公共组件
|   |--router.js                       # 路由配置
|   |--store.js                        # 状态管理
|-- .env.pre-release           # 预发布环境    
|-- .env.production            # 生产环境       
|-- .env.test                  # 测试环境  
|-- vue.config.js              # 配置文件 
|-- .eslintrc.js               # ES-lint校验                   
|-- .gitignore                 # git忽略上传的文件格式   
|-- babel.config.js            # babel语法编译                        
|-- package.json               # 项目基本信息 
|-- postcss.config.js          # CSS预处理器(此处默认启用autoprefixer)

vue.config.js配置

Vue.config.js是一个可选的配置文件，如果项目的根目录存在这个文件，那么它就会被 @vue/cli-service 自动加载。你也可以使用package.json中的vue字段，但要注意严格遵守JSON的格式来写。这里使用配置vue.config.js的方式进行处理。

const webpack = require('webpack')
module.exports = {
    //部署应用包时的基本 URL
    publicPath: process.env.NODE_ENV === 'production' ? '/online/' : './',
    //当运行 vue-cli-service build 时生成的生产环境构建文件的目录
    outputDir: 'dist',
    //放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
    assetsDir: 'assets',
    // eslint-loader 是否在保存的时候检查 安装@vue/cli-plugin-eslint有效
    lintOnSave: true,
    //是否使用包含运行时编译器的 Vue 构建版本。设置true后你就可以在使用template
    runtimeCompiler: true,
    // 生产环境是否生成 sourceMap 文件 sourceMap的详解请看末尾  
    productionSourceMap: true,
    configureWebpack: config => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
        } else {
            // 为开发环境修改配置...
        }
    },
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin 生产环境下是true,开发环境下是false
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
        // css预设器配置项
        loaderOptions: {},
        // 启用 CSS modules for all css / pre-processor files.
        modules: false
    },
    // webpack-dev-server 相关配置
    devServer: { // 设置代理
        hot: true, //热加载
        host: '0.0.0.0', //ip地址
        port: 8085, //端口
        https: false, //false关闭https，true为开启
        open: true, //自动打开浏览器
        proxy: {
            '/api': { //本地 
                target: 'xxx',
                // 如果要代理 websockets
                ws: true,
                changeOrigin: true
            },
            '/test': { //测试
                target: 'xxx'
            },
            '/pre': { //预发布
                target: 'xxx'
            },
            '/pro': { //正式
                target: 'xxx'
            }
        }
    },
    pluginOptions: { // 第三方插件配置
        // ...
    }
}

五、添加插件

如果后续想在已经被创建好的项目中安装插件，可以使用 vue add 命令：

//  e.g.
vue add element
//  vue add element不仅添加依赖还会修改你的项目页面，帮我们自动做好element的配置