Front-end——vue-cli3项目创建

大学实习期间，学习了前端的相关知识，之前也都是看看文档，直接引入官方的js，写写简单的demo，没写过项目。最近学习都最后，开始学习VUE，准备用vue-cli3写项目，因此写下此篇博客，记录vue-cli创建项目的流程。

一、安装

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

node.js安装地址：下载 | Node.js 中文网

1、vue-cli的包名称是由vue-cli改成 @vue/cli。

使用下列命令安装这个新的vue-cli包：npm install -g @vue/cli@3.10.0

2、检查版本是否正确

vue -v

二、项目创建

1、在文件夹下创建项目

注：这里千万注意切换到自己的目录下，新建项目，vue create 项目名

2、选择默认（default）还是手动（Manually）

按键盘上下键可以选择默认还是手动，如果选择了default，一路回车执行下去就行了，目前我是用的是手动

3、选择配置，看个人项目需求

空格键是选中或者取消，A是全选

1. TypeScript支持使用TypeScript书写源码
2. Progressive Web App（PWA）Support PWA支持
3. Router支持vue-router
4. Vuex：支持Vuex
5. CSS Pre-processors 支持CSS预处理器
6. Linter / Formatter 支持代码风格检查和格式化
7. Unit Testing 支持单元测试
8. E2E Tesing 支持E2E测试

根据项目需求，我的选择是这样的：

回车，询问是否保存这次配置

4、CSS的预处理我选择的是 less

5、配置文件存放位置

• 第一个是独立文件夹位置
• 第二个是在package.json文件里

6、创建成功，等待安装

7、装好之后，启动项目

cd my_test     //进入到项目根目录
npm run serve  //启动项目