Vue 创建脚手架项目

绝地灬酷狼 2024-03-24 09:33 111阅读 0赞

查看当前源地址：

npm config get registry

切换至淘宝源：  
npm config set registry=http://registry.npm.taobao.org/

全局安装\*\*  
npm install -g @vue/cli

项目原型: 墨刀连接

创建项目:

> vue create vue\_project(项目名)

敲击回车，出现以下页面

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGm5ZGA_size_20_color_FFFFFF_t_70_g_se_x_16]

*  选择第一或第二选项，后续就不需要看了，直接等待项目生成即可
 *  选择第三选项，手动配置项目，可继续往下看

> 第一次创建项目时，本人一般选择手动配置，因为[eslint][]真的是个很可怕的东西，它对代码格式的严格要求，真的会把人逼疯的，代码有一点点不规范的地方程序都会报错，虽然代码的格式规范是好的，但对于新手却不太友好

#### 2.项目手动配置 ####

默认配置中，勾选的是Bable和Linter（也就是eslint），具体配置内容见下图，然后根据自己的需求选择

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGm5ZGA_size_20_color_FFFFFF_t_70_g_se_x_16 1]

按空格键选择或取消选择，下图是本人的基础配置（仅供参考）

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGm5ZGA_size_20_color_FFFFFF_t_70_g_se_x_16 2]

#### 3.选择vue版本 ####

选择创建vue2的项目或创建vue3的项目

![在这里插入图片描述][ec190dd35e7c47b8828f952076b56d3d.png]

#### 4.路由模式 ####

第二步如果选择的路由，将会有这一步骤，意思为是否用history模式来创建路由。  
此处本人一般选择yes

![在这里插入图片描述][6b8997e570884b8ab55df157dd06ad3f.png]

#### 5.配置文件的存放位置 ####

配置文件是放在独立的配置文件中（选项一），还是放在package.json中（选项二）。  
本人一般选择第一个

![在这里插入图片描述][bd9cc71f216347bf9855cf0bbc106dda.png]

#### 6.配置保存 ####

是否保存此次配置，用于将来的项目  
如果选择yes，那么在之后创建项目时，在第一步中，选项除了两个默认配置和手动配置外，还将增加此次的配置。

![在这里插入图片描述][2f2c35183a70449c84ec3cb6673a965e.png]

选择yes，为此次配置自定义一个名称，用于之后的选择；选择no将没有这一步。

![在这里插入图片描述][3f0de2526af44c858721c794ae4f4926.png]

保存配置为test，在之后创建项目时，就可以看见我们的这一配置选项了。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGm5ZGA_size_18_color_FFFFFF_t_70_g_se_x_16]

#### 项目创建成功 ####

打开终端，进入项目文件夹（上面创建项目时名字为vue\_project，因为一些原因，本人又把项目名改成了vue\_test，大家根据自己的项目名进行修改即可），然后运行项目（npm run serve）

![!\[在这里插入图片描述\](https://img-blog.csdnimg.cn/d3d1bda7acba4f0094ea678173b9ae37.png][https_img-blog.csdnimg.cn_d3d1bda7acba4f0094ea678173b9ae37.png]

运行项目成功，点击链接在浏览器查看项目

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGm5ZGA_size_20_color_FFFFFF_t_70_g_se_x_16 3]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGm5ZGA_size_20_color_FFFFFF_t_70_g_se_x_16 4]

1.项目原型: 墨刀连接

2.项目创建：  
\#\# 创建vue项目  
vue create vue-project  
\#\# 安装插件  
vue add element - - 》 npm install babel-plugin-component -D  
npm i axios -S  
npm i querystring -S  
npm i normalize.css -S  
npm i echarts -S

3.项目的初始化：  
a.删除无用组件  
b.css初始化

4.配置路由  
a.layout布局界面  
b.登录界面

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGm5ZGA_size_20_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/47f7fc36509d4290b484d847928c4349.png
[eslint]: https://so.csdn.net/so/search?q=eslint&spm=1001.2101.3001.7020
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGm5ZGA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/7f0f8f04ab83499db7a741f6bdbc2f60.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGm5ZGA_size_20_color_FFFFFF_t_70_g_se_x_16 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/0d1c44885d074512933f4712a3168b3c.png
[ec190dd35e7c47b8828f952076b56d3d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/125182ecac654882a254010ab3b904f5.png
[6b8997e570884b8ab55df157dd06ad3f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/b57b8635e5564e2eb6cea148325706e5.png
[bd9cc71f216347bf9855cf0bbc106dda.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/cae5d2c9e3f0430993841614c2af00a0.png
[2f2c35183a70449c84ec3cb6673a965e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/ec0e502875f64411be5ae888e37c1f3c.png
[3f0de2526af44c858721c794ae4f4926.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/c92d9483c7bc4f75b0afae5815c88ed6.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGm5ZGA_size_18_color_FFFFFF_t_70_g_se_x_16]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/54a7a723507247dc83e43fe7cdce7313.png
[https_img-blog.csdnimg.cn_d3d1bda7acba4f0094ea678173b9ae37.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/15fba5832eb540e8b0c1f782ab98daab.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGm5ZGA_size_20_color_FFFFFF_t_70_g_se_x_16 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/7c67bd5eb55d401eae590173bd961fa9.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5ZGm5ZGA_size_20_color_FFFFFF_t_70_g_se_x_16 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/89334900772449b48cb23f3d9686e703.png