基于vue/cli3.0脚手架搭建Vue项目

基于vue/cli3.0+脚手架搭建Vue项目(01)

---

---

前言

过好每一天

---

一、Vue CLI是什么？面试时可以背一背

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

1：通过 @vue/cli 实现的交互式的项目脚手架。
2：通过 @vue/cli + @vue/cli-service-global 实现的零配置原型开发。
3：一个运行时依赖 (@vue/cli-service)，该依赖：可升级；
4：基于 webpack 构建，并带有合理的默认配置；
5：可以通过项目内的配置文件进行配置；
6：可以通过插件进行扩展。
7：一个丰富的官方插件集合，集成了前端生态中最好的工具。
8：一套完全图形化的创建和管理 Vue.js 项目的用户界面。

二、使用步骤

1.安装node.js

http://nodejs.cn/,推荐node12.13版本https://registry.npmmirror.com/binary.html?path=node/

2.安装vue/cli3.0+脚手架

执行命令：npm install -g @vue/cli // 3.x+版本推荐这个

3.搭建新项目

通过指令 vue create 快速搭建一个新项目

tips: 想要带可视化的界面创建项目，可以直接使用命令vue ui即可启用一套图形化界面，管理你的所有项目。

1.使用vue create 项目名称

tips：项目名小写

2.可以手动选择需要的插件包Babel，当然你也可以直接选择Vue 2，之后Vue 3会写在新的篇章与君共勉

3.EsLint+Prettier是规范我们代码和格式化的插件，用多了才会知道它的好，这里先不选择，在后面会有新篇章来安装和介绍怎么规范使用。

4.vue2.x版本+生成额外的配置文件+设置成自己项目的预设模板

5.最后生成项目目录：

6.启动项目：npm run serve

tips:使用vue ui 图形化界面如下

总结

不积跬步无以至千里