解析vue-cli@3.0使用方式和旧版本的差异-创新互联

本文在介绍关于vue-cli@3.0的基础上，重点探讨了vue-cli@3.0的使用方式以及和旧版本的差异，本文内容紧凑，希望大家可以有所收获。

2018年8月10号，vue-cli3.0面世

@2.9.3的使用
1.下载vue-cli和安装项目
cnpm i -g vue-cli#2.9.3

vue init webpack my-app

@3.0以上，目前beta版本的使用
1.下载vue-cli和安装项目
npm install -g @vue/cli

vue create //文件名 不支持驼峰（含大写字母）

全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它，否则跳过此步：

npm uninstall vue-cli -g //或者 yarn global remove vue-cli

Vue CLI 3.0与其他的版本完全不同，它经历了重构，目的是：

1.尽可能减少现代前端工具在配置上的烦恼，尤其是在开发者将多个工具混合使用时；

2.尽可能在工具链中加入最佳实践，并让其成为Vue应用程序的默认实践。

Vue CLI的核心目标是为基于webpack 4构建的预配置构建提供设置，目标是大限度地减少开发人员配置的次数，所以Vue CLI 3对具有以下特点的项目都支持开箱即用：

预配置webpack功能，如模块热替换、代码拆分、 摇树优化（tree-shaking）、高效持久化缓存等；

通过Babel 7 + preset-env（Babel插件）对 ES2017进行转换和基于使用情况注入polyfill

支持PostCSS（默认启用autoprefixer）和所有主要的CSS预处理器

Modern mode：并行发布原生ES2017 +bundle和传统bundle

多页面模式：构建具有多个HTML / JS入口点的应用程序

构建目标：将Vue单文件组件构建成为库或原生Web组件（详情如下）

可以在创建新项目时混合选用多种集成：

TypeScript

PWA

Vue Router & Vuex

ESLint / TSLint / Prettier

用Jest或Mocha进行单元测试

用Cypress 或者 Nightwatch进行E2E 测试

vue-cli3 创建的时候并不会自动创建vue.config.js，因为这个是个可选项，所以一般都是需要修改webpack的时候才会自己创建一个vue.config.js

再然后因为vue-cli3内部高度集成了webpack，一般来说使用者不需要再去知道weboack做了什么，所以没有暴露webpack的配置文件，但你依然可以创建vue.config.js 去修改默认的webpack

*一开始只有两个选项: default (默认配置)和 Manually select features (手动配置)
默认配置只有 babel 和 eslint 其他的都要自己另外再配置，所以我们选第二项手动配置。

在每次选择手动配置之后，会询问你是否保存配置，也就是图片中的 koro 选项，这样以后我们在进行创建项目的时候 只需使用原先的配置 就可以了，而不用再进行配置。*

Vue CLI 3还附带了一个完整的GUI
可以创建新项目，还可以管理项目中的插件和任务，它不需要Electron，只需用vue ui启动它。

vue.config.js
vue-cli升级到3之后，减少了很多的配置文件，之前所有的配置文件都在vue create 搭建时preset预设 或者 后期可以通过 命令参数 、 vue.config.js 中配置，所有的配置项都浓缩到了vue.config.js这个文件中，所以学懂并会用vue.config.js文件很重要。

根据需要在根目录下新建 vue.config.js自行配置，eg：（简单配置，更多配置详情参见官网：https://cli.vuejs.org/zh/config/）

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.
  },
  devServer: {// 环境配置
   host: 'localhost',
   port: 8080,
   https: false,
   hotOnly: false,
   open: true, //配置自动启动浏览器
   proxy: {// 配置多个代理(配置一个 proxy: 'http://localhost:4000' )
    '/api': {
     target: '',
     ws: true,
     changeOrigin: true
    },
    '/foo': {
     target: ''
    }
   }
  },
  pluginOptions: {// 第三方插件配置
   // ...
  }
};

热更新配置

在vue.config.js添加

chainWebpack: config => {
// 修复HMR
config.resolve.symlinks(true);
},
修改css部分热更新还需要注释掉  //extract: true,

css: {
//extract: true,// 是否使用css分离插件 ExtractTextPlugin
sourceMap: false,// 开启 CSS source maps
loaderOptions: {},// css预设器配置项
modules: false// 启用 CSS modules for all css / pre-processor files.
},

css预处理器

主要为css解决浏览器兼容、简化CSS代码 等问题
这样，热更新配置就完成了

创建项目目录时出现的问题
vue create my-app报错：write after end解决办法。降低了npm的版本到@5.6.0。貌似是之前的npm版本6.1.0有点问题
br/>解决办法。降低了npm的版本到@5.6.0。貌似是之前的npm版本6.1.0有点问题

打包出现的问题
在根目录下vue.config.js(如果没有这个文件的话，可以直接在更目录中添加一个，配置参考)文件中进行修改。

Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）

上述就是vue-cli@3.0使用方式和旧版本的差异的详细内容，详细使用情况还需要大家自己动手实验使用过才能领会。如果想了解更多，欢迎关注创新互联行业资讯频道！

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。