vue/cli3---脚手架使用及配置

在这里插入图片描述
1.先安装脚手架

npm install -g @vue/cli
# OR
yarn global add @vue/cli

2.检查版本是否是3.0
在这里插入图片描述
以前如果安装过版本的vue-cli(1.0或2.0),升级3.0版本,步骤如下:

  1. 先全局卸载npm uninstall vue-cli -gyarn global remove vue-cli
  2. 再次全局安装3.0版本。

3.创建项目,运行一个命令 vue create

vue create pro

在这里插入图片描述
创建项目会出来如上图的界面,会提示选取一个parest,你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,一路回车,会出来如下界面,如是这样,代表项目已创建成功
在这里插入图片描述
也可以选“手动选择特性”来选取需要的特性。默认的设置非常快速的创建一个新项目,而手动设置会提供很多的选项,面向生产的项目很需要。这个看个人需求
在这里插入图片描述
在这里插入图片描述

  1. 创建好的项目就变成这样,相比较2.0更加精简
  2. cd 进入项目,启动服务 npm run serve
  3. 发现少了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

猜你喜欢

转载自blog.csdn.net/weixin_43204255/article/details/85099195