作者:mobiledu2502871243 | 来源:互联网 | 2023-10-12 10:06
本文由编程笔记#小编为大家整理,主要介绍了Vue入门:Vue项目创建及启动相关的知识,希望对你有一定的参考价值。
1. 创建Vue项目存放地址
用于存放Vue项目,找个自己处理方便的地方。本人地址:D:Program FilesWorkspaceVue
2. 创建项目
进入cmd窗口 进入项目存放地址
执行命令【vue init webpack HelloWorld】创建Vue项目 [HelloWorld]为项目保存文件夹名称
![技术图片](https://img8.php1.cn/3cdc5/1e804/696/47e402258b391d15.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpNDU2MjI1OGZqMTU1,size_16,color_FFFFFF,t_70)
?
录入项目名称
![技术图片](https://img.php1.cn/3cd4a/1eebe/cd5/a5d7215df572c386.webp)
?
项目描述及作者
![技术图片](https://img.php1.cn/3cd4a/1eebe/cd5/e88efe5b0a13a7fa.webp)
?
项目构建
选择第一项
![技术图片](https://img8.php1.cn/3cdc5/1e804/696/3287177dd131bd84.png)
?
是否使用router
![技术图片](https://img8.php1.cn/3cdc5/1e804/696/685982f649f4ef94.png)
?
是否使用ESLint
![技术图片](https://img8.php1.cn/3cdc5/1e804/696/26a9c2aec682e8fa.png)
?
是否使用单元测试
![技术图片](https://img8.php1.cn/3cdc5/1e804/696/6575d2af5fe0365c.png)
?
是否使用e2e测试
![技术图片](https://img8.php1.cn/3cdc5/1e804/696/cdb022951a9205f7.png)
?
项目创建后是否执行安装
选择第一项 是
![技术图片](https://img8.php1.cn/3cdc5/1e804/696/b201c6ccecc2f2c4.png)
?
创建成功后提示
![技术图片](https://img8.php1.cn/3cdc5/1e804/696/059ec3b89e15bf9e.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpNDU2MjI1OGZqMTU1,size_16,color_FFFFFF,t_70)
?
4. 启动项目
进入项目根目录下 执行【npm run dev】
![技术图片](https://img8.php1.cn/3cdc5/1e804/696/a27663813cdead56.png)
?
启动成功后提示
![技术图片](https://img8.php1.cn/3cdc5/1e804/696/f4f95cc2f0fdd680.png)
?
访问浏览器
![技术图片](https://img8.php1.cn/3cdc5/1e804/696/b5f1bbe17bf69d5b.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpNDU2MjI1OGZqMTU1,size_16,color_FFFFFF,t_70)
?
5. 项目结构说明(不完整)