1.先安装脚手架
npm install -g @vue/cli
# OR
yarn global add @vue/cli
2.检查版本是否是3.0
以前如果安装过版本的vue-cli(1.0或2.0),升级3.0版本,步骤如下:
- 先全局卸载
npm uninstall vue-cli -g
或yarn global remove vue-cli
- 再次全局安装3.0版本。
3.创建项目,运行一个命令 vue create
vue create pro
创建项目会出来如上图的界面,会提示选取一个parest,你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,一路回车,会出来如下界面,如是这样,代表项目已创建成功
也可以选“手动选择特性”来选取需要的特性。默认的设置非常快速的创建一个新项目,而手动设置会提供很多的选项,面向生产的项目很需要。这个看个人需求
- 创建好的项目就变成这样,相比较2.0更加精简
- cd 进入项目,启动服务 npm run serve
- 发现少了vue.config.js,那配置项怎么搞
我们手动在项目里面添加文件vue.config.js
设置代理
module.exports = {
devServer: {
proxy: '<url>'
}
}
# Object
module.exports = {
devServer: {
proxy: {
'/api': {
target: '<url>',
ws: true,
changeOrigin: true
},
'/foo': {
target: '<other_url>'
}
}
}
}
具体配置项还是看api,https://cli.vuejs.org/zh/config/#lintonsave