vue-cli3创建vue项目两种方式

下载安装vue-cli脚手架

VUE CLI3的包名称由vue-cli改成@vue/cli。如果你已经安装了旧版本的vue-cli(1.x或2.x)，你先通过npm uninstall vue-cli -g或 yarn global remove vue-cli卸载它。

cnpm install @vue/cli -g
yarn global add @vue/cli

检查安装

vue -V // 大写 V

image.png

使用命令行来创建

vue create project-vue // project-vue 项目名称

• 我们选择Manually select feature 手动选择功能
• 前面两个是我创建好到预设 第三个是默认的

image.png

• 接下来就选择我们需要的一些功能，这里我就我经常使用的配置
  以上下键移动，以空格键进行是否选定
  • Babel : 将ES6编译成ES5
  • TypeScript: javascript类型的超集
  • Progressive Web App (PWA) Support: 支持渐进式的网页应用程序
  • Router:vue-router
  • Vuex: 状态管理
  • CSS Pre-processors: CSS预处理
  • Linter / Formatter: 开发规范
  • Unit Testing: 单元测试
  • E2E Testing: 端到端测试

image.png

• 这里他问我们是否使用路由器的历史模式，选择Y

image.png

• 选择css预处理器，我选择Less

image.png

• 这里询问把配置文件放哪，选择放到poackge.json文件里面

image.png

• 这里就是设置预设了，可以选择将这些配置设置为预设，方便下次快速创建

image.png

• 预设名字

image.png

• 正在安装

image.png

• 安装完执行这两个命令即可

image.png

使用ui可视化界面创建

• 输入 vue ui
  

  image.png

• 创建项目

  
  
  image.png

• 输入项目名称，包管理我选择yarn
  

  image.png

• 这可以看到我们之前保存的预设，我们选择手动

  
  
  image.png

• 功能配置还是跟上面一样

  
  
  image.png

• css预处理器我还是选择Less

  
  
  image.png

• 预设设置

  
  
  image.png

• 等他安装好就行，网不好的话可能需要多安装几次

  
  
  image.png

• 项目安装好了

  
  
  image.png