共计 3076 个字符，预计需要花费 8 分钟才能阅读完成。
安装
关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。使用以下命令安装这个新的包
npm install -g @vue/cli
安装之后，用这个命令来检查其版本是否正确 (3.x)
vue –version
创建一个项目
vue create projectname
运行以下命令来创建一个新项目：
vue create hello-world
选择默认 (基本的 Babel + ESLint) 配置，还是手动配置，上下键控制 vue-cli3.0 在你创建后会有一个保存当前配置的功能因为之前创建过，提供保存配置的功能, 这里选最后一个手动配置
一般不要选择 eslint 检验你的代码，否则你可能会遇到很多麻烦一般采用 vue-router（路由必备）,vuex（全家桶的状态管理器）,sass（css 扩展语言）,babel(使项目可用 es6)（你的项目决定你用什么）空格多选 TypeScriptPWAVue-routerVuexCSS 预处理 eslint prettier 自动化测试单元测试、e2e
使用图形化界面配置项目
vue ui
CSS 相关
Vue CLI 项目天生支持 PostCSS、CSS Modules 和包含 Sass、Less、Stylus 在内的预处理器。
引用静态资源
所有编译后的 CSS 都会通过 css-loader 来解析其中的 url() 引用，并将这些引用作为模块请求来处理。这意味着你可以根据本地的文件结构用相对路径来引用静态资源。另外要注意的是如果你想要引用一个 npm 依赖中的文件，或是想要用 webpack alias，则需要在路径前加上 ~ 的前缀来避免歧义。更多细节请参考处理静态资源。
附上项目的 vue.config.js
module.exports = {
baseUrl: ”,
outputDir: ‘dist’,
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
assetsDir: ‘static’,
// 默认情况下，生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。如果你无法使用 Vue CLI 生成的 index HTML，你可以通过将这个选项设为 false 来关闭文件名哈希。
filenameHashing: true,
pages: {
index: {
// page 的入口
entry: ‘src/main.js’,
// 模板来源
template: ‘public/index.html’,
// 在 dist/index.html 的输出
filename: ‘index.html’,
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: ‘Index Page’,
// 在这个页面中包含的块，默认情况下会包含
// 提取出来的通用 chunk 和 vendor chunk。
chunks: [‘chunk-vendors’, ‘chunk-common’, ‘index’]
},
},
// eslint-loader 是否在保存的时候检查
lintOnSave: process.env.NODE_ENV !== ‘production’,
// 是否使用包含运行时编译器的 Vue 核心的构建
runtimeCompiler: undefined,
// 生产环境 sourceMap
productionSourceMap: false,
// 该函数及可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。
configureWebpack: config => {
if (process.env.NODE_ENV === ‘production’) {
// 为生产环境修改配置 …
} else {
// 为开发环境修改配置 …
/* var webpack = require(‘webpack’);
var webpackConfig = require(‘./node_modules/@vue/cli-service/lib/config/dev.js’);
var compiler = webpack(webpackConfig);
require(‘webpack-dev-middleware-hard-disk’)(compiler, {
publicPath: webpackConfig.output.publicPath,
quiet: true
})*/
}
},
// 会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
chainWebpack: (config) => {
// 链式配置
// var webpackConfig = require(‘./node_modules/@vue/cli-service/lib/config/dev.js’);
// // 配置插件：添加
// config
// .plugin(‘webpack-dev-middleware-hard-disk’)
// .use(require.resolve(‘webpack-dev-middleware-hard-disk’), {
// publicPath:webpackConfig,
// quiet: true
// });
},
// 配置高于 chainWebpack 中关于 css loader 的配置
css: {
sourceMap: true,
loaderOptions: {
css: {
// 这里的选项会传递给 css-loader
},
postcss: {
// 这里的选项会传递给 postcss-loader
}
}
},
// 所有 webpack-dev-server 的选项都支持
// https://webpack.docschina.org/configuration/dev-server/
devServer: {
open: true,
host: ‘localhost’,
port: 3000,
https: false,
hotOnly: true,
// proxy: {
// ‘/api’: {
// // 目标 API 地址
// target: ‘http://114.55.59.209:8080’,// 开发环境
// // target: ‘http://192.168.6.163:8080/’,// 域名环境
// // 如果要代理 websockets
// // ws: true,
// // 将主机标头的原点更改为目标 URL
// changeOrigin: true,
// pathRewrite:{
// ‘^/api’:’/’ // 这个很重要
// }
// }
// },
before: app => {
}
},
// 构建时开启多进程处理 babel 编译
parallel: require(‘os’).cpus().length > 1,
// https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// 第三方插件配置
pluginOptions: {
foo: {
// 插件可以作为 `options.pluginOptions.foo` 访问这些选项。
}
}
};