准备:
- git-bash命令行工具
- Node.js环境
- npm包管理工具
- webpack打包工具
- Vue-Cli脚手架工具
搭建步骤:
-
打开git-bash,先进入项目存储目录,例:
cd C:\vue
-
执行命令初始化vue项目
vue init webpack demo
在上述命令中,demo表示项目名称,可以根据需要自定义名称。程序会自动在当前目录下创建demo子目录作为项目目录 ,webpack表示项目的模板。
-
在创建项目时,程序会询问项目的一些配置选项,直接按回车键使用默认值即可。
-
切换到项目目录,启动服务
cd demo npm run dev
执行命令成功会看到如下提示信息:
Your application is running here: http://localhost:8080
-
访问项目:在浏览器地址栏输入http://localhost:8080
demo目录结构:
目录结构 | 说明 |
---|---|
build | 项目构建(webpack)相关代码 |
config | 配置文件目录 |
node_modules | 依赖模块 |
src | 源码目录 |
static | 静态资源目录 |
test | 初始测试目录 |
index.html | 首页入口文件 |
package.json | 项目配置文件 |
README.md | 项目说明文档 |
文章评论