vue之使用脚手架
VUE脚手架的使用,总是忘记,今天就索性写一篇博客加深下印象吧!
- 什么是VUE脚手架
- 如何使用脚手架
1、什么是VUE脚手架
vue脚手架是已经包含核心功能和配置的半成品项目,并且规范了项目结构,避免了大量的重复劳动
2、如何使用脚手架
脚手架使用流程 :
首先应当安装用于反复创建脚手架项目的命令行工具
npm i -g @vue/cli
或
npm install -g @vue/cli
接着使用命令行工具为一个项目创建一套脚手架代码
vue create 项目名
注意
如果你执行了 npm i -g @vue/cli 时,出现了如图所示的代码,那么就说明您的vue版本过低,需要分别执行以下两个命令重新安装。
安装成功应该是这个样子
接下来我们就可以来使用脚手架命令行工具来创建项目了,今天我就在桌面上创建一个项目做演示,当我们找到在用vue create 项目名
按下回车之后:
看图:
第一步:
上图的意思是:请选择一项预设?第一项是默认,第二项是手动自己选择
通常情况下会选择第二种。
如何选择:使用键盘上下箭头控制,回车是确定;
第二步:
上图的意思是:请你手动选择您的项目中需要的功能?按 a 全选,按 空格 选中,按 i 取消选中。
Babel: 专门将ES6、ES7语法转换成所有浏览器都能解析运行的ES5语法
TypeScript:它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。
Progressive Web App (PWA) Support:渐进式的网页应用程序
Router:专门实现单页面,路由管理
Vuex:vue中的状态管理模式
CSS Pre-processors: css 预处理器,比如sass
Linter / Formatter: 代码风格、格式校验
Unit Testing:单元测试
E2E Testing :端对端测试
这个的选中,要看项目需要了!
我姑且选择Babel、 Router、 Vuex
第三步:
上图的意思是问你,是否选用history 模式作为你的路由管理模式?
我一般选Y
第四步:
上图是说,选择Babel,PostCSS, ESLint等自定义配置的存放位置。
第一个是 : 存放在专用配置文件中
第二个是: 存放在package.json中
我一般选择第二个
第五步:
上图是问你:是否要把这次配置作为将来所有项目的预设配置
我一般选择N, 拒绝
选择完第五步就已经可以了,只需稍等片刻。
如上图所示就已经创建成功了。
接下来就可以运行脚手架项目了。使用 npm run serve
到此为止,脚手架已经搭建完成了。
扩展:一般情况可通过vs code进行打开调试。
将我们创建好的项目使用vs code 打开。
选择在集成终端打开,输入npm run serve。
之后按住Ctry + 鼠标左键 点击网址即可打开项目。