(一)、如果本机电脑已经安装了Vue-cli 2.X(可在cmd使用vue-cli –v 查看)版本,需要先卸载,打开CMD命令行工具,输入:npm uninstall vue-cli –g;
(二)、接着安装vue-cli 3.0,同样在CMD中,输入:npm install -g @vue/cli;
(三)、去存放项目的指定目录下,创建项目,输入:vue create project-name(你的项目名)//文件名 不支持驼峰(含大写字母)
(四)、创建成功后,即进入项目基本配置阶段; ①Your connection to the default npm registry seems to be slow. Use registry.npm.taobao.org for faster installation? (Y/n) y 是否使用淘宝镜像,以加快依赖包等下载速度,这里一般选择是Y。设置完这步后,即进入到正式的项目基本配置阶段。
②配置方式询问
My-default——我原来保存好的模板(具有上一次创建项目,并进行配置,并且把配置保存下来,若是第一次创建项目没有这个选项);
Default ——使用默认配置(脚手架默认定义)
Manually select features——自定义设置(本次项目配置现在进行自定义)
这里选择自定义设置
③选择所要设置的配置
这里表示选择所要配置的配置项,上下键为上下移动选择,空格键为确定,其他不常用功能键详见提示
选择好后,确定点击回车
④询问是否在router中使用history模式
一般默认是hash模式,这里要说一下,router的history模式与hash模式,hash不用去请求服务器,而history是要去请求服务器的,并且服务器中必需要有与之对应的响应,,否则会跳到404页面,所以一般选择N。
⑤选择CSS预处理语言
这里询问要选择哪种CSS预处理语言,选择哪个根据自己的实际需求选择,这里选用SASS。
(补充一下,node-sass与dart-sass的区别,node-sass是自动实时编译的,dart-sass是需要保存后才会生效的; SASS官方主推dart-sass,最新的特性都会在这上面先实现)
⑥自动化代码语法、格式化检测
可以根据自己的需求选择哪种的自动化代码语法、格式化检测,这里选择第一项。
⑦选择语法检查方式
( ) Lint on save // 保存就检测
( ) Lint and fix on commit // fix和commit时候检查
这里选择第一项
⑧询问配置文件存放位置
这里是询问babel,postcss,eslint这些配置文件存放的地方,
In dedicated config files // 独立文件放置
In package.json // 放package.json里
一般推荐独立放置文件,这里选择第一个
⑨询问此次配置方案是否保存为模板,方便下次直接使用配置。
如果选择Y,则会提示输入此配置模板的名字,即上面第二步一开始,第一个选项——我的模板的名字,确定后开始构建项目
选择N,则直接开始构建项目
⑩构建项目的过程中,会自动把依赖包下载好(比vue-cli 2.x操作方便,不需要等项目构建完,再进入项目里手动安装依赖了)等待项目构建完。
11.项目构建完成后,输入: cd 你的项目名(一开始创建的);//进入项目文件; npm run serve//启动服务; 浏览器输入local网址,运行成功。