怎么用Vuecli 3.0快速创建项目
3.查看可选源(带*号即为当前使用源)
nrm ls
4.切换源
以淘宝镜像为例:
nrm use taobao
5.测试源速度(即响应时间)
比如:测试官方源和淘宝源的响应时间
nrm test npm
nrm test taobao
可以得出,淘宝源的速度要远快于官方源,安装完nrm之后,我们进行创建项目,我们下载和搭建的速度就会快很多,才能称上快速两个字;
二.创建项目
1.新建项目
vue create jjrweb //后面为文件名 不支持驼峰(含大写字母)
弹出如下界面:
1.第一个“ my-default”是我之前保存的预设配置,等下下面会介绍到;
2.default(babel,eslint):默认套餐,提供 babel 和 eslint 支持;
3.Manually select features:自己去选择需要的功能,提供更多的特性选择。比如如果想要支持 TypeScript ,就应该选择这一项;
如果想要更多的支持,这里我选择Manually select features:切换到这项,按下 enter 键选中,
弹出如下界面:
可以多选:使用方向键在特性选项之间切换,使用空格键选中当前特性,使用 a 键切换选择所有,使用 i 键翻转选项。
( ) Babel //转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。 ( ) TypeScript// TypeScript是一个JavaScript(后缀.js)的超集(后缀.ts)包含并扩展了 JavaScript 的语法,需要被编译输出为 JavaScript在浏览器运行,目前较少人再用 ( ) Progressive Web App (PWA) Support// 渐进式Web应用程序 ( ) Router // vue-router(vue路由) ( ) Vuex // vuex(vue的状态管理模式) ( ) CSS Pre-processors // CSS 预处理器(如:less、sass) ( ) Linter / Formatter // 代码风格检查和格式化(如:ESlint) ( ) Unit Testing // 单元测试(unit tests) ( ) E2E Testing // e2e(end to end) 测试
这里我选择的为图片中的选项,回车:
弹出如下界面:
是否使用history router:这里我选择NO,后期如果要改成history,手动去路由里添加即可,回车;
弹出如下界面:
css预处理器,主要为css解决浏览器兼容、简化CSS代码 等问题,你习惯使用哪种选择哪种即可,这里我选择Less
弹出如下界面:
ESLint:提供一个插件化的javascript代码检测工具,ESLint + Prettier //使用较多,这里我选择ESLint + Prettier
弹出如下界面:
何时检测:这里我选择Lint on save 保存时检测
弹出如下界面:
如何存放配置 :这里我选择图中选择
弹出如下界面:
是否保存本次配置(y:记录本次配置,然后需要你起个名; n:不记录本次配置):这里我选择NO,上文中正好说到这个,如果你选择yes,下次创建项目的时候就可以选择按之前模板来
弹出如下界面:
搭建完成:可以进入到该项目文件夹,然后运行项目;
2.项目结构
精简了很多,但还是和vue2.0有很多区别的,基本的用法变化不是特别大,如图: