在webpack中配置.vue组件
在webpack中配置.vue组件页面的解析
- 运行
npm i vue -S将vue安装为运行依赖； - 运行
npm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖； - 运行
npm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式； 在webpack.config.js中，添加如下module规则
module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader'] }, { test: /\.vue$/, use: 'vue-loader' } ] }创建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路由模块
导入路由模块：
import VueRouter from 'vue-router'安装路由模块：
Vue.use(VueRouter);导入需要展示的组件:
import login from './components/account/login.vue' import register from './components/account/register.vue'创建路由对象:
var router = new VueRouter({ routes: [ { path: '/', redirect: '/login' }, { path: '/login', component: login }, { path: '/register', component: register } ] });将路由对象，挂载到 Vue 实例上:
var vm = new Vue({ el: '#app', // render: c => { return c(App) } render(c) { return c(App); }, router // 将路由对象，挂载到 Vue 实例上 });改造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