vue-cli使用

npm i -g vue-cli

ln -s /node-v8.11.3-linux-x64/bin/vue /usr/local/bin/vue

vue init webpack my-project

会自动在当前目录生成一个名为my-project的文件夹，然后一直回车和yes，等待安装依赖

至此，vue-cli脚手架已生成

先浏览一下生成的文件目录，并修改config/index.js里dev的host项

//host: 'localhost', // can be overwritten by process.env.HOST
host:'192.168.123.229',

cd my-project
npm run dev

打开浏览器浏览http://192.168.123.229:8080 即可看到效果

热更新(修改文件浏览器内容自动同步)设置
修改config/index.js文件里dev的poll为true

poll:true,

修改build/webpack.dev.conf.js文件里devServer中hot选项值为true

hot: true,

vue-route:vue路由
在src/components目录下新增TT.vue，内容如下

<template>
  <div class="">
    <h1 v-for="c in items" :key="c.id">{{ c.message }}</h1>
  </div>
</template>

<script>
export default {
  name: 'TT',
  data () {
    return {
      msg: 'this is TT',
      items: [
        { id: '1',message: 'Foo' },
        { id: '2',message: 'Bar' }
      ]
    }
  }
}
</script>

<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

修改src/route/index.js，

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//导入组件
import TT from '@/components/TT'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
      },
      //新路由
     {
       path: '/tt',
       name: 'TT',
       component: TT
     }
  ]
})

打开浏览器浏览http://192.168.123.229:8080/#/tt 即可看到效果

打包

npm run build

执行后会生成一个dist文件，所有打包内容都在里面了