August 2018 No. 10, vue-cli3.0 available
@ 2.9.3 Use
1. Download and install vue-cli project
cnpm i -g vue-cli # 2.9.3
vue init webpack my-app
@ 3.0 above, the current beta version to use
1. Download and install vue-cli project
npm install -g @ vue / cli
vue create <Project Name> // filename does not support the hump (with capital letters)
Global installed an older version of vue-cli (1.x or 2.x) must first uninstall it, otherwise skip this step:
npm uninstall vue-cli -g //或者 yarn global remove vue-cli
Vue CLI 3.0 and other versions is completely different, it has undergone reconstruction, in order to:
1. Modern minimize trouble in the configuration of the tool, especially in the developer mix when a plurality of tools;
2. The possible addition of best practices in the tool chain and let it become the default practice Vue applications.
Vue CLI core objective is to provide a set of pre-configured to construct 4 webpack built based on the goal of minimizing the number of development staffing, so Vue CLI 3 project with the following features are supported out of the box:
Webpack preconfigured function, such as hot-replace module, the code resolution, the tree shaking optimization (tree-shaking), persistent caching efficiency;
+ Preset-env (Babel widget) to ES2017 Babel 7 and converted by the use of injection based polyfill
Support PostCSS (enabled by default autoprefixer) and all major CSS preprocessor
Modern mode: Parallel release native ES2017 + bundle and traditional bundle
Multi-page mode: building applications having a plurality of HTML / JS entry point
Build target: to become Vue single-file components to build libraries or native Web Components (details below)
You can choose a variety of integrated mixed when creating a new project:
TypeScript
WEIGHT
Vue Router & Vuex
ESLint / TSLint / Prettier
Jest or unit testing using Mocha
E2E Cypress conduct testing or Nightwatch
* Beginning with only two options: default (default configuration) and Manually select features (manual configuration)
default configuration only babel and eslint other must own an additional configuration, so we chose the second manual configuration.
After each selection manually configured, you are asked if you save the configuration, that is, the picture koro option so that later when we created during the project's original configuration simply use it without further configuration. *
Vue CLI 3 also comes with a complete GUI
can create new projects, manage project tasks and plug-ins, it does not require Electron, just start it with vue ui.
vue.config.js
VUE-cli after upgrading to 3, to reduce a lot of the configuration file, before all the preset profiles are preset when vue create or set up by the late command parameters, vue.config.js configured, all the configuration items are concentrated into vue.config.js this file, it will be very important to learn to understand and use vue.config.js file.
According to the new needs in the root directory vue.config.js self-configuring, eg :( simple configuration, more configuration details, see the official website: 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 中使用：<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: {// 第三方插件配置
// ...
}
};Hot update configuration
Add vue.config.js
chainWebpack: config => {
// fix the HMR
config.resolve.symlinks (to true);
},
modify css portion of the heat required to update commented // extract: true,
css: {
// Extract: to true, // whether to use css separate plug-in ExtractTextPlugin
sourceMap: false, // turn on Source Maps CSS
loaderOptions: {}, // css pre-configured entry
modules: false // Enable CSS modules for all CSS / pre-Processor Files.
},
css preprocessor
Mainly to solve the css browser compatibility, simplify CSS code and other issues
like this, hot update configuration is complete
That appears when you create a project directory problem
vue create my-app error: the After the Write End br /> solutions. Npm reduced version of the @ 5.6.0. Looks like the previous version 6.1.0 npm a little problem
Vue CLI 3 need nodeJs ≥ 8.9 (the official recommended 8.11.0+, or you can use nvm nvm-windows Node manage multiple versions on the same computer)
Packaging problems arise
vue.config.js (if not the file, you can directly add more directories in a configuration reference) in the root directory of the file to be modified.
Vue-Router using its own hash browser history modes and features to achieve distal routing mode (by calling the interface provides a browser)