【Vue基础】前端工程化Vue项目

Myth丶恋晨 2023-10-11 21:36 103阅读 0赞

**一、创建Vue项目步骤**

1、新建一个文件夹，起名为vue\_project01

2、在该文件夹中打开cmd，输入指令vue ui，打开图形化界面

![c80acd303fa4442898aa8cde458f825f.png][]

3、此时跳转到网页，根据以下步骤配置vue项目

1）项目名命名为test01；选择包管理器为npm；关闭初始化Git仓库

![b66af5635fd1467e80bc4e530aa872e5.png][]

2）选择手动配置

3）选择Router，其他不变

![f4cb77d87f9b428495dd70ae663d5206.png][]

3）选择vue版本为2.0；选择语法检测规则为“ESLint with error...”；点击创建项目时在弹出的窗口中选择“创建项目不保存预设”，此时正在下载，预计1分钟，此过程需保持联网。出现Ready时下载完成，如下图1；此时浏览器显示如下图2；自己建的文件夹vue\_project01中出现tese01项目，如下图3

![1b6921d2082c4213beece8ce57608078.png][]

![f37f3746984e4851b8eaa83b4037aa5d.png][]

![9a251bbcb3514b35b4e304e92335ba76.png][]

4、用VS Code打开项目test01

![19200ac51dfa420a97a685c81cd3fc47.png][]

![29c6e618d60145e787d518d0e3ca12b5.png][]

5、启动NPM SCRIPTS的serve...如下图2

注：如果没有NPM脚本，需要点击资源管理器右边的“...”，勾选NPM Scripts，如下图1

![83b6eee3611445608677ef6491cec79f.png][]

![8c55b10290ed436e970bd40c86305583.png][]

如果"..."处没有NPM Scripts选项，参考链接2在下方TERMINAL处输入指令调起服务：

npm run serve

6、若想修改端口号，比如将8000改为7000，步骤如下：

1）修改代码；终止批处理操做

![bcf0c5706264485c8f412df8c6d7c4b1.png][]

2）刷新后，链接显示端口为7000，如下图1。点击跟随链接跳转到网页，网页地址栏也显示端口号变为7000，如下图2

![742ff08a0b1d474681fbcbe9cb6a1633.png][]

![042bff61a3814f818cf2eb76eda8eba8.png][]

**二、参考链接**

1、前端工程化Vue项目教程

[https://www.bilibili.com/video/BV1m84y1w7Tb?p=38&vd\_source=841fee104972680a6cac4dbdbf144b50][https_www.bilibili.com_video_BV1m84y1w7Tb_p_38_vd_source_841fee104972680a6cac4dbdbf144b50]

2、[https://blog.csdn.net/qq\_43416650/article/details/121679282][https_blog.csdn.net_qq_43416650_article_details_121679282]

[c80acd303fa4442898aa8cde458f825f.png]: https://img-blog.csdnimg.cn/c80acd303fa4442898aa8cde458f825f.png
[b66af5635fd1467e80bc4e530aa872e5.png]: https://img-blog.csdnimg.cn/b66af5635fd1467e80bc4e530aa872e5.png
[f4cb77d87f9b428495dd70ae663d5206.png]: https://img-blog.csdnimg.cn/f4cb77d87f9b428495dd70ae663d5206.png
[1b6921d2082c4213beece8ce57608078.png]: https://img-blog.csdnimg.cn/1b6921d2082c4213beece8ce57608078.png
[f37f3746984e4851b8eaa83b4037aa5d.png]: https://img-blog.csdnimg.cn/f37f3746984e4851b8eaa83b4037aa5d.png
[9a251bbcb3514b35b4e304e92335ba76.png]: https://img-blog.csdnimg.cn/9a251bbcb3514b35b4e304e92335ba76.png
[19200ac51dfa420a97a685c81cd3fc47.png]: https://img-blog.csdnimg.cn/19200ac51dfa420a97a685c81cd3fc47.png
[29c6e618d60145e787d518d0e3ca12b5.png]: https://img-blog.csdnimg.cn/29c6e618d60145e787d518d0e3ca12b5.png
[83b6eee3611445608677ef6491cec79f.png]: https://img-blog.csdnimg.cn/83b6eee3611445608677ef6491cec79f.png
[8c55b10290ed436e970bd40c86305583.png]: https://img-blog.csdnimg.cn/8c55b10290ed436e970bd40c86305583.png
[bcf0c5706264485c8f412df8c6d7c4b1.png]: https://img-blog.csdnimg.cn/bcf0c5706264485c8f412df8c6d7c4b1.png
[742ff08a0b1d474681fbcbe9cb6a1633.png]: https://img-blog.csdnimg.cn/742ff08a0b1d474681fbcbe9cb6a1633.png
[042bff61a3814f818cf2eb76eda8eba8.png]: https://img-blog.csdnimg.cn/042bff61a3814f818cf2eb76eda8eba8.png
[https_www.bilibili.com_video_BV1m84y1w7Tb_p_38_vd_source_841fee104972680a6cac4dbdbf144b50]: https://www.bilibili.com/video/BV1m84y1w7Tb?p=38&vd_source=841fee104972680a6cac4dbdbf144b50
[https_blog.csdn.net_qq_43416650_article_details_121679282]: https://blog.csdn.net/qq_43416650/article/details/121679282