01 快速构建基于webpack模板的Vue项目

推荐使用Node.js的包管理器 npm来构建项目，这是全球最大的开源库生态系统。下载安装后，在命令窗口通过以下命令可以检测node.js版本信息

node --version

同样也可以检测npm的版本信息，验证安装

npm -v

在开始创建Vue项目之前，请先安装webpack（前端资源加载/打包工具）；
以及Vue的官方命令行工具Vue-cli，这将用于快速搭建大型单页应用，仅仅只需几分钟

npm install webpack -g
npm install vue-cli -g

接下来选择一个期望的目录来保存项目

cd 你的目标目录

见证奇迹的时刻到了，通过以下Vue-cli命令，创建一个基于webpack模板的Vue项目。

vue init webpack my-project

按照命令提示一步步完善项目信息，包括

? Project name  xxx    项目名称
? Project description  xxx    项目描述
? Author  xxx    项目作者
? Vue build standalone    构建方式
? Install vue-router? Yes  是否安装路由
? Use ESLint to lint your code? No    是否启用eslint检测规则
? Setup unit tests with Karma + Mocha? No    是否启用单元测试
? Setup e2e tests with Nightwatch? No    是否启用端到端测试

稍等片刻，项目构建成功，接下来命令窗口会提示您可以：

npm install    安装项目依赖
cd 你的目标目录    进到项目目录
npm run dev    启动项目

此时如果一切顺利，在浏览器打开http://localhost:8080，就可以看到以下页面了

运行中的Vue项目.png

恭喜！您的Vue项目已经在运行了。
而项目结构应该就是这样：

目录结构.png