vue-cli3搭建项目

458 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

环境要求:vue cli要求node版本8或者更高(8.10.0+推荐) 

                  vue cli3 需要node版本>=8.9, (官方推荐:8.11.0+ )

1、打开cmd命令行输入以下命令,全局安装vue-cli3。

npm install -g @vue/cli

2、下载好之后,在cmd中进入项目文件夹,输入vue create '你的项目名'   回车创建。

3、接下来进入选择环节,进行配置选择。

图片

(1)选择配置

此处有两个选择:

  • default (babel, eslint) 默认套餐,提供 babel 和 eslint 支持。
  • Manually select features 自己去选择需要的功能,提供更多的特性选择。比如如果想要支持 TypeScript,就应该选择这一项。

图片

(2)回车后可进行选择,8个功能特性,可以多选:使用方向键在特性选项之间切换,使用空格键选中当前特性,使用 a 键切换选择所有,使用 i 键翻转选项。我的选择如下,请根据自己需要进行选择。

  • TypeScript 支持使用 TypeScript 书写源码。
  • Progressive Web App (PWA) Support PWA 支持。
  • Router 支持 vue-router 。
  • Vuex 支持 vuex 。
  • CSS Pre-processors 支持 CSS 预处理器。
  • Linter / Formatter 支持代码风格检查和格式化。
  • Unit Testing 支持单元测试。
  • E2E Testing 支持 E2E 测试。

图片

(3)是否选择history模式,根据自己需要选择。

图片

(4)是否选择预语言,根据自己需要选择。

图片

 (5)是否ESlint输出,根据自己需要选择。

图片

(6)是否保存时或者提交时是进行ESlint校验,根据自己需要选择。

图片

(7)选择把配置文件放在外面,选择 In dedicated config files

图片

(8)要不要把当前的这一系列选项配置保存起来,方便下一次创建项目时复用。

图片

(9)依赖安装完成之后启动项目。

npm run serve

图片

(10)目录结构详解

图片