@vue/cli4创建vue项目，详细介绍（cmd）

注：本文章用来做记录，是根据各大佬的文章参考的，如发现抄袭，望谅解

一、准备工作

        查看版本：

脚手架问题： 安装npm install -g @vue/cl需注意 @vue/cli 4.5.15、

二、命令（cmd）

        注：有些电脑是要管理员的cmd才能创建的

1）创建项目名：vue create 项目名称

        名称名称：必须小写，好像全大写可以，但驼峰命名不可以

2）选择配置

        建议：自定义配置

        这里我改一下背景，后面看不清楚

        通过键盘上下键切换（一行），回车进入下一步

         除了这些，还有一下配置，是自己在后面步骤保存的配置

3）手动配置

        空格选中或取消选中，上下键切换（一行）

 

 介绍：

        Choose Vue version：选择vue版本，用户后面选择版本

        Babel：vue项目中普遍使用es6语法，但有时我们的项目需要兼容低版本浏览器，这时就需要引入babel插件，将es6转成es5

        TypeScript：TypeScript通过添加类型来扩展JavaScript。通过了解JavaScript，TypeScript可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器，任何操作系统，任何运行JavaScript的地方。 完全开源

        Progressive Web App (PWA) Support：渐进式Web应用程序（PWA）支持

        Router：路由

        Vuex：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

        CSS Pre-processors：CSS预处理器，预处理器：比如要用sass或者cssNext就要按照人家规定的语法形式，就是用人家的语法去编写，然后人家把你编写的代码转成css。

        Linter / Formatter：格式化程序

        Unit Testing：单元测试

        E2E Testing：端到端（end-to-end）

不懂的话：

        就跟我选择，新手差不多够用

4）选择vue版本

        这个就是选择vue的版本，如果前面你没有选中的话，我不清楚有没有喔，请重新，配置吧，没啥事的，因为没有到最后一步，可能没有什么下载的。

 

5）是否选中历史模式

         Use history mode for router?：路由器使用历史模式?

        输入：N，hash模式

 Vue-Router 利用了浏览器自身的hash 模式和 history 模式的特性来实现前端路由（通过调用浏览器提供的接口）。

我这里建议选n。这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。

选yes的话需要服务器那边再进行设置。

6）选择CSS预处理器

        这里，我选择less，因为我就会这个 

 7）选择Eslint代码验证规则

        我选择的是标准的，有些选择默认第一个，有些选择最后一个

8） 选择什么时候进行代码规则检测

( ) Lint on save // 保存就检测

( ) Lint and fix on commit // fix和commit时候检查

建议选择保存就检测，等到commit的时候，问题可能都已经积累很多了。

9）选择如何存放配置

        Indedicated config files // 独立文件放置

        Inpackage.json // 放package.json里

10）是否保存当前配置

        建议：不保持，如保持，在第二步，会出现配置选项

11）等待下载

        

11）下载完毕

11）切换，运行

        注意：运行是在项目内部文件里，而不是创建项目时的文件目录运行

        比如：在d:\项目：下创建项目；而在进入下一级运行项目：cd test；运行：npm run serve

 

 12）运行成功