Vue-CLI是Vue.js的脚手架,用于自动生成vue.js+webpack的项目模板,并带有合理的默认配置,用于快速启动新项目的开发 。
vue-cli 3.0版本
全局安装过旧版本的 vue-cli(1.x 或 2.x)要先卸载它,否则跳过此步:npm uninstall vue-cli -g
1.安装
$ npm install @vue/cli -g
2.创建项目
$ vue create 项目名
3.运行
$ npm run serve
4.打包
$ npm run build
注:3.0版本打包后的文件存在路径引用问题,需在vue.config.js添加如下代码
module.exports ={
publicPath :process.env.NODE_ENV === 'production'
?'./':'/'
}
因为3.0版本不再有build和config了, 想要配置的话,需要在项目 根目录 下创建vue.config.js文件,语法与webpack.config.js 稍有不同。
语法如下:
module.exports = {
// 基本路径
publicPath: '/',
// 输出文件目录
outputDir: 'dist',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
compiler: false,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
// vue-loader 配置项
// https://vue-loader.vuejs.org/en/options.html
vueLoader: {},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// 是否启用dll
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
dll: false,
// PWA 插件相关配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相关配置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // 设置代理
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
如有引入样式框架库在打包后出现样式失效的情况,将打包后的index页面中的css引入顺序更改下即可
例如将<link href=css/app.d4c96c83.css rel=stylesheet>放到最前面
vue-cli 2.0版本
1.安装
$ npm i vue-cli -g
2.创建项目
$ vue init webpack 项目名
3.运行
$ npm run dev
4.打包
$ npm run build
rimraf删除工具
功能:用于快速删除node_modules文件
1.全局安装
$ npm install -g rimraf
2.快速删除
$ rimraf node_modules
( 注:可以用cd指定目录位置,也可在目录位置shift+右键打开powershell,这也是cmd控制台)
关于dependencies 和 devDependencies的区别
1.存在dependencies 中的,是在生产环境中要用到的,比如项目插件element ui、mint ui、echarts是在项目运行中需要使用的,所以用 -S
2.存在devDependencies中的,是在开发环境中要用到的,比如构建工具glup、webpack等,是用来压缩代码和打包的工具,程序实际运行的时候并不需要,所以要用 -D