更新时间:2022-09-27 来源:黑马程序员 浏览量:
在Vue项目开发的时候,为了提高加载时间和性能,webpack打包工具会将项目中的文件转为浏览器可以读取的静态文件。下面我们来演示如何创建一个简单的Vue项目。
(1)在创建项目之前应先完成vue-cli脚手架工具的安装。脚手架工具可以直接生成一个项目的整体架构,帮助开发者搭建Vue.js的基础代码。执行命令如下:
npm install vue-cli@2.9.x -g
将vue-cli安装完成后,可以执行“vue-cli-V”命令,查看安装的版本号。
(2)打开C:\vue\chapter01目录,执行如下命令初始化vue项目:
vue init webpack myapp
在上述命令中,myapp表示项目名称,可以根据需要自定义名称。程序会自动在当前目录下创建myapp子目录作为项目目录。webpack表示项目的模板。
(3)在创建项目时,程序会询问项目的一些配置选项,直接按回车键使用默认值即可。关于vue-cli的使用具体会在之后的章节中详细讲解。
接下来分析myapp项目的目录结构,具体解释如下所示。
1.build:项目构建(webpack)相关代码。
2.config:配置文件目录
3.node_modules:依赖模块
4.src:源码目录
5.static:静态资源目录
6.test:初始测试目录
7.index.html:首页入口文件
8.package.json:项目配置文件
9.README.md:项目说明文档
(4)切换到项目目录,然后启动服务,具体命令如下:
cd myapp npm run dev
执行上述命令后,如果启动成功,会看到如下提示信息:
Your application is running here: http://localhost:8080
上述信息表示当前应用已经启动,可以通过http://localhost:8080来访问。使用浏览器打开这个地址,运行结果如图1-15所示。
(5)使用VS Code编辑器打开“C:\chapter01\myapp“目录,就可以在该目录下进行项目的开发了。
图1-15 运行结果
【AI设计】北京143期毕业仅36天,全员拿下高薪offer!黑马AI设计连续6期100%高薪就业
2025-09-19【跨境电商运营】深圳跨境电商运营毕业22个工作日,就业率91%+,最高薪资达13500元
2025-09-19【AI运维】郑州运维1期就业班,毕业14个工作日,班级93%同学已拿到Offer, 一线均薪资 1W+
2025-09-19【AI鸿蒙开发】上海校区AI鸿蒙开发4期5期,距离毕业21天,就业率91%,平均薪资14046元
2025-09-19【AI大模型开发-Python】毕业33个工作日,就业率已达到94.55%,班均薪资20763元
2025-09-19【AI智能应用开发-Java】毕业5个工作日就业率98.18%,最高薪资 17.5k*13薪,全班平均薪资9244元
2025-09-19