Vue 自定义项目的创建以及配置

1、准备工作

1、打开cmd，输入node -v查看node版本
（如果没有安装node需要先安装node。node下载地址：http://nodejs.cn/）

node -v

2、cmd中输入 npm -v 查看npm版本

npm -v

3、使用npm安装Vue CLI （npm下载较慢可以使用cnpm）

npm install -g @vue/cli
或
yarn global add @vue/cli

4、输入 vue -v 查看是否安装完成（安装成功会显示版本）

vue -v

2、创建项目

1、创建项目。

在cmd中移动到想要创建的目录下

vue create 项目名

2、自定义配置

1、选择版本。上下键选择版本，然后回车。（这里选择最后一个演示，选择vue3或者vue2会自动安装）

（Manually select features 手动选择功能）

2、选择要安装的资源 ，选完回车。

（上下键移动，空格选中，带星号即为选中）
1.Babel 这个是ES6的转换器，因为ES6是质变的一代，这个插件能够帮你把代码转换成ES5以前，现在基本没啥用。
2.TypeScript 这是微软的相当于一个javascript的增强吧，这里也用不上
3. Progressive Web App (PWA) Support 这个是要做App的一个支持的插件，这个要用的可以选上
4.Rounter 这个是路由
5.Vuex 这个是用于Vue状态管理的
6.CSS Pre-processors 这个是用来优化css文件 让那些sass和less的文件可以一同被打包到最终的项目里，有webpack基础的可能有点感触
7.Linter / Formatter 这个是用来检查代码规范的
8.Unit Testing 单元测试 有软件测试基础的同学可能会用到 其他大概率也用不上
9.E2E Testing 端到端测试 和上面一样 不搞测试的同学都用不上

此处参考链接：https://blog.csdn.net/Super_hzj/article/details/118968349

3、选择vue版本

上下键移动，然后回车

4、选择是否使用历史的路由，然后回车

路由两种模式，自行选择 Y 或 N
1、history模式
2、hash模式

5、代码检查设置，选择规范

上下键切换，回车进行选择

第一个是只报错，不规范
第二个是符合airbnb规范
第三个是standard规范
第四个是这个prettier规范
参考链接：VS Code使用Vetur插件+.prettierrc.js配置格式化规范
(这里我选择standard的是 ESLint + Standard config)

6、代码检查设置，检查时间点

保存时检查和提交时检查

7、第三方配置文件设置

这个是问你你的这些插件/组件要放在哪个文件里
第一个是放在一个独立的文件里
第二个时放在默认生成的package.json里

8、是否保存之前的设置

来到这个页面，问你之前这些配置是否保存，若保存，下次再配置时，就会和这次一样的配置内容

9、保存的文件名

上一步选择保存设置后，会询问你保存设置的文件名，自行取名。

然后回车，就能生成项目啦！

之后再次创建项目时就有刚刚保留配置的文件啦（我刚刚保存配置的文件名 vue02config）

3、运行项目

安装完成后会在cmd中弹出以下两个命令，依次输入可运行项目

cd vue02 移动至该项目目录下
yarn serve 运行项目（要先移动至项目目录下才能运行）

随后就能访问项目：http://localhost:8080/