基于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
图形化界面如下
总结
不积跬步无以至千里