vue作为国产优秀开源项目已经火了很久 一直没太多时间去学习
首先 安装好node 配置好环境变量 这里我们直接使用官方的脚手架开发

npm install vue-cli

等待进度

vue init webpack 项目名

然后填写各种信息 完成后 npm run dev 即可进入开发模式
首先处理下bable

npm install --save-dev babel-preset-stage-0

我这里兼容ES7使用了stage-0 它包含stage-1, stage-2以及stage-3的所有功能
env包含了babel-preset-es2015, babel-preset-es2016, and babel-preset-es2017
编辑.babelrc文件

"presets": ["env","stage-0"]

完成进行保存 接下来关闭烦人 eslint 打开webpack.base.conf.js找到createLintingRule注释掉 eslint内容
接着 添加less的支持

      {
        test: /\.less$/,
        loader: "style-loader!css-loader!less-loader",
      }

这样在style标签里 使用lang="less"即可标注为less文件 自动进行编译
当然 也别忘了

npm install less less-loader --save-dev

接着 我们来看下文件结构 根目录下的index.html
这个其实就是入口文件 打开webpack.dev.conf.js就可以看见 webpack把进行编译好的js插入到页面之中

那么 插入的是谁呢？

`entry: {

app: './src/main.js'

},`
就是src中的main.js 我们来看看都是写了什么

import Vue from 'vue'
import App from './App'
import router from './router'

......
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

这里引用了VUE和APP和router
把APP（也就是APP.VUE 引用时候 vue可省略）定义为了一个template 也就是首页中的app标签将被替换为app.vue所包含内容

那router又是什么呢？ router就是router文件夹下面的index.js 里面包含了vue的路由信息
把文件单独出来有利于开发
现在我们来看vue文件

<template>
  ....
</template>
<script>
export default {
  name: 'App',
 data() {
  return {
    ....
   }
}}
</script>
<style>
....
</sty;e>

不同于在html中直接使用vue 在vue里不需要在new vue 了
只需 export 出结构即可 export里的 this也是当前vue文件形成的vue实例