vue-cli 4.0构建vue项目

vue-cli 4.0构建vue项目

一、安装vue-cli脚手架

1 检查是否已经安装vue-cli及版本 vue -V命令

版本低于4.0需要先卸载 再全局安装

卸载命令 cnpm uninstall -g vue-cli

重新安装 cnpm install -g @vue/cli

安装完成之后检查是否安装成功

PS C:\Users\WX> vue -V
@vue/cli 4.5.10

二、使用vue-cli 4.0新建vue项目

以项目位于D:\workspace\vue文件夹下，创建一个项目名称为hello-vue的vue项目为例

PS C:\Users\WX> d:
PS D:\> cd D:\workspace\vue
PS D:\workspace\vue> vue create hello-vue

?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n)

提示npm镜像速度有点慢，是否使用淘宝cnpm镜像，这里选择是，输入Y 

输入Y，回车，提示信息如下

意思是选择一些预设preset（功能性插件）， 通过键盘方向键选择

Default ([Vue 2] babel, eslint)             基于vue2.0，当前稳定发布版本，所以选择默认的话就选第一个

Default (Vue 3 Preview) ([Vue 3] babel, eslint)      基于vue3.0，尝鲜版

Manually select features    手动选择，这里演示手动选择，提示如下

默认选择了3个，根据需要自行选择即可(通过键盘的方向键+space选中/取消选中) 

这里简要说明一下各个选项作用，深入了解单独百度：

Choose Vue version     后续步骤提示你选择vue版本，就是上面的那个Default ([Vue 2] babel, eslint)和Default (Vue 3 Preview) ([Vue 3] babel, eslint)

babel   js代码编译器，兼容ES5/6/7代码，如兼容import/export/async await/promise等代码

typescript   支持typescript

pwa     渐进式网页应用

router    vue路由

vuex   状态管理，如token，浏览偏好等

CSS Pre-processors    支持scss/sass/less等

Linter / Formatter   代码格式规范

Unit Testing   单元测试

E2E Testing  黑盒测试

我们这里选择Choose Vue version   /babel   /router   /vuex   /Linter / Formatter   

选择之后，继续提示选择版本，我们选择2.x，然后提示如下：

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)

由于上面的preset列表我们选择了router ，这里询问我们路由方式，选择Y 使用history mode，该模式浏览器前进，后退都可以用，路径中没有#

选择代码检验模式 

ESLint with error prevention only 只配置使用 ESLint 官网的推荐规则 这些规则在这里添加链接描述
ESLint + Airbnb config 使用 ESLint 官网推荐的规则 + Airbnb 第三方的配置 Airbnb
的规则在这里添加链接描述 ESLint + Standard config 使用 ESLint 官网推荐的规则 + Standard
第三方的配置 Standard 的规则在这里 添加链接描述 ESLint + Prettier 使用 ESLint 官网推荐的规则 +
Prettier 第三方的配置 Prettier     该模式使用居多

选择什么时候进行代码校验，Lint on save 保存就检查，Lint and fix on commit   fix 或者 commit 的时候检查，建议第一个

 

 

 如何存放配置，In dedicated config files 存放到独立文件中，In package.json 存放到 package.json 中

 

? Save this as a preset for future projects? (y/N)  是否保存本次的配置，N 不记录，如果选择 Y 需要输入保存名字，一般不保存

至此，项目构建完成

 

三、启动服务

新建的项目，package.json中，scripts字段如下：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

控制台通过cnpm run server启动项目

vue-cli-service server实际启动了webpack-dev-server，对比vue2.0，"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

vue-cli-service server也可以携带参数，用法：vue-cli-service serve [options] [entry]

Usage: vue-cli-service serve [options] [entry]

Options:

  --open         open browser on server start
  --copy         copy url to clipboard on server start
  --mode         specify env mode (default: development)
  --host         specify host (default: 0.0.0.0)
  --port         specify port (default: 8080)
  --https        use https (default: false)
  --public       specify the public network URL for the HMR client
  --skip-plugins comma-separated list of plugin names to skip for this run

我们一般在项目根目录新建一个vue.config.js 配置文件，通过devServer配置上面的options

devServer: {

    open: true, // 启动成功后自动打开浏览器页面

    host: '0.0.0.0', // 匹配本机IP地址(默认是0.0.0.0)

    port: 8888, // 开发服务器运行端口号

    ...

}

四、vue 4.0对比vue 2.0变动

1 index.html ：

　　vue cli 2 ：“index.html ” 

　　vue cli 3/4 ：“public/index.html ”此模板会被 html-webpack-plugin 处理的

2 去掉 static  、 新增 public 文件夹

　　vue cli 2 ：static 是 webpack 默认存放静态资源的文件夹，打包时会直接复制一份到dist文件夹不会经过 webpack 编译 

　　vue cli 3/4  ：摒弃 static 新增了 public 。vue cli 3 中“静态资源”两种处理方式：

　　经webpack 处理：在 JavaScript 被导入或在 template/CSS 中通过“相对路径”被引用的资源会被编译并压缩

　　不经webpack 处理：放置在 public 目录下或通过绝对路径被引用的资源将会“直接被拷贝”一份，不做任何编译压缩处理

3 src/views：

　　vue cli 3/4 的 src文件夹 新增 views文件夹 用来存放 “页面”，区分 components（组件）

4 去掉 build（根据config中的配置来定义规则）、config（配置不同环境的参数）文件夹 ：

 　　vue cli 3/4 中，这些配置 你可以通过 命令行参数、或 vue.config.js （在根目录 新建一个 vue.config.js 同名文件）里的 devServer 字段配置开发服务器

5 babel.config.js：

        vue cli 2：通过build文件夹下的webpack配置文件配置

　　vue cli 3/4：配置Babel 。Vue CLI4 使用了 Babel 7 中的新配置格式 babel.config.js。和 .babelrc 或 package.json 中的 babel 字段不同，这个配置文件不会使用基于文件位置的方案，而是会一致地运用到项目根目录以下的所有文件，包括 node_modules 内部的依赖。官方推荐在 Vue CLI 项目中始终使用 babel.config.js 取代其它格式。

 

最后，附一个vue.config.js配置文件，网上很多，更多配置详情参见官网：https://cli.vuejs.org/zh/config/

module.exports = {
  publicPath: '/',// 部署应用时的根路径(默认'/'),也可用相对路径(存在使用限制)
  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 中使用：<title><%= htmlWebpackPlugin.options.title %></title>
      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.
  },
  devServer: {// 环境配置
    host: 'localhost',
    port: 8080,
    https: false,
    hotOnly: false,
    open: true, //配置自动启动浏览器
    proxy: {// 配置多个代理(配置一个 proxy: 'http://localhost:4000' )
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  },
  pluginOptions: {// 第三方插件配置
    // ...
  }
};