Vue-cli 3.0项目构建流程

195 阅读3分钟

(一)、如果本机电脑已经安装了Vue-cli 2.X(可在cmd使用vue-cli –v 查看)版本,需要先卸载,打开CMD命令行工具,输入:npm uninstall vue-cli –g;

image.png

(二)、接着安装vue-cli 3.0,同样在CMD中,输入:npm install -g @vue/cli;

image.png

(三)、去存放项目的指定目录下,创建项目,输入:vue create project-name(你的项目名)//文件名 不支持驼峰(含大写字母)

image.png

(四)、创建成功后,即进入项目基本配置阶段; ①Your connection to the default npm registry seems to be slow. Use registry.npm.taobao.org for faster installation? (Y/n) y 是否使用淘宝镜像,以加快依赖包等下载速度,这里一般选择是Y。设置完这步后,即进入到正式的项目基本配置阶段。

image.png

②配置方式询问

image.png My-default——我原来保存好的模板(具有上一次创建项目,并进行配置,并且把配置保存下来,若是第一次创建项目没有这个选项); Default ——使用默认配置(脚手架默认定义) Manually select features——自定义设置(本次项目配置现在进行自定义) 这里选择自定义设置

③选择所要设置的配置

image.png 这里表示选择所要配置的配置项,上下键为上下移动选择,空格键为确定,其他不常用功能键详见提示 选择好后,确定点击回车

④询问是否在router中使用history模式

image.png 一般默认是hash模式,这里要说一下,router的history模式与hash模式,hash不用去请求服务器,而history是要去请求服务器的,并且服务器中必需要有与之对应的响应,,否则会跳到404页面,所以一般选择N。

⑤选择CSS预处理语言

image.png 这里询问要选择哪种CSS预处理语言,选择哪个根据自己的实际需求选择,这里选用SASS。 (补充一下,node-sass与dart-sass的区别,node-sass是自动实时编译的,dart-sass是需要保存后才会生效的; SASS官方主推dart-sass,最新的特性都会在这上面先实现)

⑥自动化代码语法、格式化检测

image.png 可以根据自己的需求选择哪种的自动化代码语法、格式化检测,这里选择第一项。

⑦选择语法检查方式

image.png ( ) Lint on save // 保存就检测 ( ) Lint and fix on commit // fix和commit时候检查 这里选择第一项

⑧询问配置文件存放位置

image.png 这里是询问babel,postcss,eslint这些配置文件存放的地方, In dedicated config files // 独立文件放置 In package.json // 放package.json里 一般推荐独立放置文件,这里选择第一个

⑨询问此次配置方案是否保存为模板,方便下次直接使用配置。

image.png 如果选择Y,则会提示输入此配置模板的名字,即上面第二步一开始,第一个选项——我的模板的名字,确定后开始构建项目

image.png 选择N,则直接开始构建项目

⑩构建项目的过程中,会自动把依赖包下载好(比vue-cli 2.x操作方便,不需要等项目构建完,再进入项目里手动安装依赖了)等待项目构建完。

image.png

11.项目构建完成后,输入: cd 你的项目名(一开始创建的);//进入项目文件; npm run serve//启动服务; 浏览器输入local网址,运行成功。

image.png