从头搭建Vue项目

基本信息

Vue CLI 3需要 nodeJs ≥ 8.9 (官方推荐 8.11.0+）。

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。有三个组件：

1. CLI：@vue/cli 全局安装的 npm 包，提供了终端里的vue命令（如：vue create 、vue serve 、vue ui 等命令）
2. CLI 服务：@vue/cli-service是一个开发环境依赖。构建于 webpack 和 webpack-dev-server 之上（提供 如：serve、build 和 inspect 命令）
3. CLI 插件：给Vue 项目提供可选功能的 npm 包 （如： Babel/TypeScript 转译、ESLint 集成、unit和 e2e测试 等）

安装步骤

1. 安装脚手架cnpm i -g @vue/cli（文件名 不支持驼峰（含大写字母））
2. 创建一个vue项目vue create createvue
3. 项目配置
   在配置项目过程中会提供两个选项：

• default（babel，eslint）：
  默认设置（直接enter）非常适合快速创建一个新项目的原型，没有带任何辅助功能的 npm包
• Manually select features：
  手动配置（按方向键 ↓）是我们所需要的面向生产的项目，提供可选功能的 npm 包
  其中配置项

? Check the features needed for your project: (Press  to select,  to toggle all,  to invert selection)
>( ) Babel                           //转码器，可以将ES6代码转为ES5代码，从而在现有环境执行。                      
 ( ) TypeScript// TypeScript是一个JavaScript（后缀.js）的超集（后缀.ts）包含并扩展了 JavaScript 的语法，需要被编译输出为 JavaScript在浏览器运行，目前较少人再用
 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序
 ( ) Router                           // vue-router（vue路由）
 ( ) Vuex                             // vuex（vue的状态管理模式）
 ( ) CSS Pre-processors               // CSS 预处理器（如：less、sass）
 ( ) Linter / Formatter               // 代码风格检查和格式化（如：ESlint）
 ( ) Unit Testing                     // 单元测试（unit tests）
 ( ) E2E Testing                      // e2e（end to end） 测试

单元检测

? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai  //mocha灵活,只提供简单的测试结构，如果需要其他功能需要添加其他库/插件完成。必须在全局环境中安装
  Jest          //安装配置简单，容易上手。内置Istanbul，可以查看到测试覆盖率，相较于Mocha:配置简洁、测试代码简洁、易于和babel集成、内置丰富的expect

在哪里存放配置

? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files // 独立文件放置
  In package.json // 放package.json里

是否保存此次配置

? Save this as a preset for future projects? (Y/n) // y:记录本次配置，然后需要你起个名; n：不记录本次配置

配置项目.png

相关配置

1. 配置vue.config.js
   之前所有的配置文件都在vue create 搭建时preset预设，后期开发者也可以通过命令参数 、 vue.config.js 更改配置配置

根据需要在根目录下新建 vue.config.js自行配置
注：
命令行中执行vue inspect > output.js , 这样我们会得到一份最终生效的 webpack配置信息文件output.js。

module.exports = {
    baseUrl: '/',// 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
    outputDir: 'dist',// 运行时生成的生产环境构建文件的目录(默认''dist''，构建之前会被清除)
    assetsDir: '',//放置生成的静态资源(s、css、img、fonts)的(相对于 outputDir 的)目录(默认'')
    indexPath: 'index.html',//指定生成的 index.html 的输出路径(相对于 outputDir)也可以是一个绝对路径。
    pages: {//pages 里配置的路径和文件名在你的文档目录必须存在 否则启动服务会报错
        index: {//除了 entry 之外都是可选的
            entry: 'src/index/main.js',// page 的入口,每个“page”应该有一个对应的 JavaScript 入口文件
            template: 'public/index.html',// 模板来源
            filename: 'index.html',// 在 dist/index.html 的输出
            title: 'Index Page',// 当使用 title 选项时,在 template 中使用：
            chunks: ['chunk-vendors', 'chunk-common', 'index'] // 在这个页面中包含的块，默认情况下会包含,提取出来的通用 chunk 和 vendor chunk
        },
        subpage: 'src/subpage/main.js'//官方解释：当使用只有入口的字符串格式时,模板会被推导为'public/subpage.html',若找不到就回退到'public/index.html',输出文件名会被推导为'subpage.html'
    },
    lintOnSave: true,// 是否在保存的时候检查
    productionSourceMap: true,// 生产环境是否生成 sourceMap 文件
    css: {
        extract: true,// 是否使用css分离插件 ExtractTextPlugin
        sourceMap: false,// 开启 CSS source maps
        loaderOptions: {},// css预设器配置项
        modules: false// 启用 CSS modules for all css / pre-processor files.
    },
    // 配置webpack
    // vue.config.js 中的 outputDir => output.path
    // vue.config.js 中的 baseUrl => output.publicPath
    configureWebpack: {
        plugins: [
            // new MyAwesomeWebpackPlugin()
            //......
        ]
    },
    devServer: {// 环境配置
        host: 'localhost',
        port: 8080,
        https: false,
        hotOnly: false,
        open: true, //配置自动启动浏览器
        // proxy: {// 配置多个代理(配置一个 proxy: 'http://localhost:4000' )
        //     '/api': {
        //         target: '',
        //         ws: true,
        //         changeOrigin: true
        //     },
        //     '/foo': {
        //         target: ''
        //     }
        // }
        // 配置跨域代理
        proxy: 'http://192.168.37.101:81'

    },
    pluginOptions: {// 第三方插件配置
        // ...
    }
}

运行

npm run serve