如果你已经安装了vue 2.9.6 的话,则需要先将其删除指令为:
npm uninstall -g vue-cli
第二步:更新Vue-cli 指令:
npm install -g @vue/cli 或 cnpm install -g @vue/cli 或 yarn global add @vue/cli
第三步:安装之后,记得查看版本号:查看版本(是否安装成功):vue -V (大写的V)
vue -V
接下来就是构建项目了,输入指令:vue create project-name (project-name为项目名);
自定义配置
选择 [自定义]
方向键上下移动,空格选中,Enter确定,自定义配置中,您将会看到这些配置项:
1,是否使用babel做转义
2,是否使用class风格的组件语法
3,选择CSS预处理类型
4,选择语法检测规范
5,选择 保存时检查 / 提交时检查
6,选择配置信息存放位置,单独存放或者并入package.json
7,是否保存当前预设,下次构建无需再次配置
8.完成安装
cd project-name // 进入项目根目录
npm run serve // 运行项目
9.现在在根目录下新建一个 vue.config.js 文件,配置 :vue.config.js
vue-cli 3.0 创建的项目,已经干掉了原有的webpack配置,取而代之的是,vue.config.js
相信很多人尝试配置的时候都遇到了bug。经过一顿深挖github issue 以后终于找到了答案
module.exports = {
publicPath: '/',//publicPath取代了baseUrl
outputDir: 'dist',
lintOnSave: true,
runtimeCompiler: true, //关键点在这 原来的 Compiler 换成了 runtimeCompiler
// 调整内部的 webpack 配置。
// 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
// 配置 webpack-dev-server 行为。
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
// 查阅 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
proxy: null, // string | Object
before: app => {}
}
}
vue-cli3启动服务自动打开浏览器配置
1.首先创建一个vue-cli3项目。
2.找到package.json文件
3.找到配置项‘scripts’
4.找到配置项‘serve’
5.修改下,加个字段 “serve”: “vue-cli-service serve --open”