孙肖宁

在webpack中配置.vue组件
在webpack中配置.vue组件页面的解析运行npm i vue -S将vue安装为运行依赖;运行npm i v...
扫描右侧二维码阅读全文
04
2018/08

在webpack中配置.vue组件

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

  1. 运行npm i vue -S将vue安装为运行依赖;
  2. 运行npm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖;
  3. 运行npm i 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' }
    
    ]
    
     }
  5. 创建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>

6.创建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)

   });

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

在webpack.config.js中添加resolve属性:

resolve: {
   alias: {
     'vue$': 'vue/dist/vue.esm.js'
   }
 }

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

  1. 导入路由模块:

    import VueRouter from 'vue-router'
  2. 安装路由模块:

    Vue.use(VueRouter);
  3. 导入需要展示的组件:

    import login from './components/account/login.vue'
    
    import register from './components/account/register.vue'
  4. 创建路由对象:

    var router = new VueRouter({
    
     routes: [
    
       { path: '/', redirect: '/login' },
    
       { path: '/login', component: login },
    
       { path: '/register', component: register }
    
     ]
    
    });
  5. 将路由对象,挂载到 Vue 实例上:

    var vm = new Vue({
    
     el: '#app',
    
     // render: c => { return c(App) }
    
     render(c) {
    
       return c(App);
    
     },
    
     router // 将路由对象,挂载到 Vue 实例上
    
    });
  6. 改造App.vue组件,在 template 中,添加router-link和router-view:

       <router-link to="/login">登录</router-link>
    
       <router-link to="/register">注册</router-link>
    
    
    
       <router-view></router-view>
    

组件中的css作用域问题scoped

scoped仅在当前组件,或者子组件中有效

<style scoped>
div {
 color: red;
}
</style> 

抽离路由为单独的模块

import VueRouter from 'vue-router'

// 导入 Account 组件
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'

// 导入Account的两个子组件
import login from './subcom/login.vue'
import register from './subcom/register.vue'

// 3. 创建路由对象
var router = new VueRouter({
 routes: [
   // account  goodslist
   {
     path: '/account',
     component: account,
     children: [
       { path: 'login', component: login },
       { path: 'register', component: register }
     ]
   },
   { path: '/goodslist', component: goodslist }
 ]
})

// 把路由对象暴露出去
export default router
Last modification:August 4th, 2018 at 10:39 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment