初始化项目
这里我们使用vue-cli来自动生成vue.js项目的模板。
安装Node.js
用npm安装vue-cli
npm install -g vue-cli
可能会提示权限的问题，需要授权
sudo chmod -R 777 /usr/local/lib
- 使用vue-cli
vue init webpack
vue为我们提供了两个模板，webpack和webpack-simple，webpack-simple比较适合小项目，这里我们用webpack。
- 安装依赖并运行
npm install
npm run dev
项目结构
我们下面来看一下项目目录下这一堆东西分别是什么。
.
├── build/ # webpack config files
│ └── ...
├── config/
│ ├── index.js # main project config
│ └── ...
├── src/
│ ├── main.js # app entry file
│ ├── App.vue # main app component
│ ├── components/ # ui components
│ │ └── ...
│ └── assets/ # module assets (processed by webpack)
│ └── ...
├── static/ # pure static assets (directly copied)
├── .babelrc # babel config
├── .postcssrc.js # postcss config
├── .eslintrc.js # eslint config
├── .editorconfig # editor config
├── index.html # index.html template
└── package.json # build scripts and dependencies
build/
这个目录包含开发环境和生产环境Webpack的实际配置。通常不需要修改这些文件。
config/index.js
这是主配置文件，是build的通用配置选项。包括开发环境
src/
这是你主要代码的所在位置，也包括assets。
static/
这里是不需要用Webpack处理的静态资源。
index.html
这是我们单页面应用程序的模板。在开发和构建期间，Webpack将生成资产，并将生成资产的url自动注入到此模板中呈现出最终的html。
package.json
包含所有构建依赖项和构建命令的npm软件包元文件。
