首页技术文章正文

Web前端培训:如何构建一个Vue项目?

更新时间:2022-09-27 来源:黑马程序员 浏览量:

IT培训班

  在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“目录,就可以在该目录下进行项目的开发了。

1664261397131_图1-15运行结果.jpg

  图1-15 运行结果

分享到:
在线咨询 我要报名
和我们在线交谈!