核心提示：Vue-Cli一个由Vue官方开发的脚手架，可以快速的开发一个网站。安装npm install vue-cli -gvue init webpack project-name配置VSCode环境插件：...
Vue-Cli
一个由Vue官方开发的脚手架，可以快速的开发一个网站。
安装
npm install vue-cli -g vue init webpack project-name
配置VSCode环境
插件：
Vetur 支持vue文件 VueHelper 代码提示配置：
让vscode支持vue文件的高亮，在setting.json里（vscode的配置文件），添加以下字段：
"files.associations": {
"*.vue": "vue"
}
目录结构
. ├── build # webpack配置文件目录（一般不用改） │ ├── build.js # 生产环境构建 │ ├── check-versions.js # 版本检查（node、npm） │ ├── dev-client.js # 服务器热重载（开发时用，自动刷新） │ ├── dev-server.js # 构建本地服务器 │ ├── utils.js # 构建相关工具 │ ├── vue-loader.conf.js # css加载器配置 │ ├── webpack.base.conf.js # webpack基础配置 │ ├── webpack.dev.conf.js # webpack开发环境配置 │ └── webpack.prod.conf.js # webpack生产环境配置 ├── config # Vue配置文件目录 │ ├── dev.env.js # 项目开发环境配置 │ ├── index.js # 项目主要配置 │ └── prod.env.js # 项目生产环境配置 ├── src # 项目核心文件目录 │ ├── App.vue # 根组件 │ ├── assets # 静态文件目录（CSS/JS等） │ ├── components # 组件目录 │ ├── main.js # 入口文件 │ └── router # 路由配置目录 │ └── index.js # 默认路由配置文件 ├── static # 静态文件目录（一般放图片） ├── index.html # 主页 └── package.json # Node的配置文件
main.js（入口文件）
main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例
后期还可以引入插件，当然首先得安装插件。
App.vue（根组件）
一个vue页面通常由三部分组成:模板(template)、js(script)、样式(style)
components（组件目录）
可以将自定义的组件放到这里面
从外部引入css
使用css-loader插件可以让vue内的style通过外部引入的方式引入进来，这样可以让代码更简洁。
安装：
$ npm install css-loader
使用：
router（路由配置目录）
router目录下默认有一个index.js文件，里面是配置路由的。
@符号
在index.js文件中可以看到这样一句代码：
import Hello from '@/components/Hello'
默认情况下@代表/src目录，在build/webpack.base.cof.js中可以修改这个选项。
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src') // 这里就是@所指的路径
}
},
修改路由配置文件报错
如果使用ESLint（代码规范检查器）进行开发，那么改动了src/router/index.js中的代码，即使多了一个回车都会出现报错。
解决方法：在build/webpack.base.cof.js中注释掉以下内容后重新npm run dev。
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},
如果对这个工具有需要的话，可以进行设置来避免这个情况。
vue文件
.vue文件就是一个html文件，注释和其他使用都和html一致。
但是vue大多数情况下是指一个组件，一个组件包含template、script和style。
