阅读 165
webpack结合vue使用

webpack结合vue使用

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

在webpack中配置.vue组件页面的解析

  1. 运行yarn add vue -S将vue安装为运行依赖;
  2. 运行yarn add vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖;
  3. 运行yarn add style-loader css-loader -D将解析转换CSS的包安装为开发依赖,因为.vue文件中会写CSS样式;
  4. webpack.config.js中,添加如下module规则:
module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.vue$/, use: 'vue-loader' }
    ]
  }
复制代码
  1. 创建App.js组件页面
 <template>
   <!-- 注意:在 .vue 的组件中,template 中必须有且只有唯一的根元素进行包裹,一般都用 div 当作唯一的根元素 -->
   <div>
     <h1>这是APP组件 - {{msg}}</h1>
     <h3>我是h3</h3>
   </div>
 </template>
 <script>
 // 注意:在 .vue 的组件中,通过 script 标签来定义组件的行为,需要使用 ES6 中提供的 export default 方式,导出一个vue实例对象
 export default {
   data() {
     return {
       msg: 'OK'
     }
   }
 }
 </script>
 <style scoped>
 h1 {
   color: red;
 }
 </style>
复制代码
  1. 创建main.js入口文件
 // 导入 Vue 组件
 import Vue from 'vue'
 // 导入 App组件
 import App from './components/App.vue'
 // 创建一个 Vue 实例,使用 render 函数,渲染指定的组件
 var vm = new Vue({
   el: '#app',
   render: c => c(App)
 });
复制代码
  1. index.html页面中添加vue控制区域
  <div id="app"></div>
复制代码

在使用webpack构建的Vue项目中使用模板对象

  1. webpack.config.js中添加resolve属性:
resolve: {
extensions: ['.js', '.vue', '.json'],  //
 alias: { //配置项通过别名来把原导入路径映射成一个新的导入路径
   'vue$': 'vue/dist/vue.esm.js'
 }
}
复制代码
  1. webpack.config.jsplugins配置vue插件:
const VueLoaderPlugin = require('vue-loader/lib/plugin');

plugins: [
  ...
  new VueLoaderPlugin(), //配置vueloader插件
]
复制代码

在vue组件页面中,集成vue-router路由模块

  1. 运行yarn add vue-router -S将vue安装为运行依赖;
  2. 导入路由模块:
import VueRouter from 'vue-router'
复制代码
  1. 安装路由模块:
Vue.use(VueRouter);
复制代码
  1. 创建使用路由对象:
import Vue from 'vue'
import VueRouter from 'vue-router'

import login from './component/login.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    {path: '/', redirect: '/login'},
    {path: '/login', component: login},
  ]
})

export default router
复制代码
  1. 将路由对象,挂载到 Vue 实例上:
import router from './router.js'

var vm = new Vue({
  el: '#app',
  router,
  render: c => c(App)
})
复制代码
  1. 在app.vue组件中添加router-view
<template>
  <div>
    <router-view></router-view>
  </div>
</template>
复制代码
文章分类
前端
文章标签