webpack的学习02---webpack与vue结合

1. 单文件组件 

   单文件组件就是文件扩展名为 .vue 的 single-file components(单文件组件) ，详细请看  https://cn.vuejs.org/v2/guide/single-file-components.html

2. 单文件组件的使用

2.1 创建单文件组件 例如创建名为app.vue 的组件

<template>
  <div>
    {{msg}}
  </div>
</template>
<script>
export default {   //由export default 导出一个对象
  data(){
    return {
      msg: 'hello world'
    }
  }
}
</script>
<style>
  div {
    color: #f00;
  }
</style>

2.2 安装 loader 

命令： npm install vue --save

            npm install vue-loader vue-template-compiler --save-dev

2.3 创建一个app.js文件 把loader 引入 然后在new一个实例，并且在HTML中创建id为APP 的元素，然后再引入App组件，通过 render 函数 把组件渲染到页面

// 引入vue   这里的vue就死通过npm 安装过来的
import Vue from 'vue'
// 引入创建的App 组件
import App from './components/app.vue'
//new 一个实例
new Vue({
  el: '#app',
  // render: function(h){  // 参数名h 可以随便取
  //   return h(App)   //render函数就是把App组件渲染到 #APP 的实例上
  // }

  //把render函数写为ES6的写法
  render: h => h(App)
})

2.4 在webpack.config.js文件中配置  vue-template-compiler （因为浏览器不能够解析vue文件 所以需要插件来打包翻译）配置方法如下;

      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }

　　2.5 运行 npm run dev

 路由的配置

命令：  npm install vue-router --save

配置文件app.js

  //app.js
  import Vue from 'vue'
  import App from './App.vue'
  import Login from './Login.vue'
    // 1. 引入vue-router
  import VueRouter from 'vue-router'
  // 2. 表示使用路由插件
  Vue.use(VueRouter)
  //3. 配置路由规则
10   var router = new VueRouter({
   routes: [
    { name: 'login', path: '/login', component: Login }
  ]
  })
  new Vue({
   el: '#app',
   // 挂载路由
   router,
   // 这是个渲染函数，指定渲染组件
   render: h => h(App)
  })

 3.vue-cli脚手架工具

 vue-cli 是一个官方脚手架工具，所谓脚手架就是一架子，什么架子呢，项目结构的架子，里面有一些最基本的配置，利用vue-cli 我们可以生成这样的一个架子，所以它被称为vue脚手架工具

 

命令： npm install vue-cli -g

            vue init webpack admin     这行命令的意思是用vue初始化一个以webpack工具打包的名为admin的项目