webpack3中vue的用法

webpack中导入vue和普通页面用script导入vue的区别

1.安装 vue

通过 npm i vue -S安装vue

2.引用vue

在main.js中引用vue：以 import Vue from 'vue'这种方式运行打开页面会报错You are using the runtime-only build of Vue where the template compiler is not available.

所以在引用vue的时候有两种方式：

一：在 main.js中导入 import Vue from '../node_modules/vue/dist/vue.js'

二：在main.js中导入import Vue from 'vue' ，同时在webpack.config.js中配置 reslove节点：

 resolve: {
        alias: { //修改 Vue 被导入时候的包的路径
            "vue$": "vue/dist/vue.js"
        }
    }

3.在 vue 中结合 render 函数渲染指定的组件到容器中

webpack中如何使用vue:

(1) 安装vue的包：cnpm i vue -S

(2) 由于在webpack中，推荐使用.vue这个组件模板文件定义组件，所以，需要安装能解析这种文件的loader cnpm i vue-loader vue-template-compiler -D ，安装好之后再在rules下配置解析.vue的loader { test: /\.vue$/, use: 'vue-loader' }

(3) 在mian.js中，导入 vue模块 import Vue from 'vue'

(4) 定义一个 .vue 结尾的组件，其中，组件有三部分组成：template script style

(5) 使用 import login from './login.vue'导入这个组件

(6) 创建 vm 的实例 var vm=new Vue({el:'#app',render:c=>c(login)})

(7) 在页面中创建一个 id 为 app 的 div 元素，作为我们 vm 实例要控制的区域；

export default 和 export 的使用方法

(1) 在 ES6 中，通过规范的形式，规定了 ES6 中如何导入和导出模块

ES6中导入模块：使用 import 模块名称 from '模块标识符' import '表示路径'

ES6中导出模块：使用 export default 和 export

(2) 在 Node 中

使用 var 名称 = require('模块标识符') 导入模块

使用module.exports 和 exports

注意：（1）export default 向外暴露的成员，可以使用任意的变量来接收

​ （2）在一个模块中， export default 只允许向外暴露 1 次

​ （3）在一个模块中，可以同时使用 export default 和 export 向外暴露成员

​ （4）使用 export 向外暴露的成员，只能使用 {} 的形式来接收，这种形式，叫做[按需导出]

​ （5）export 可以向外暴露多个成员，同时，如果某些成员，我们在 import 的时候，不需要，则可以不再 {} 中定义

​ （6）使用 export 导出的成员，必须 严格按照 导出时候的名称，来使用 {} 按需接收；

​ （7）使用 export 导出的成员，如果 就像换个 名称来接收，可以使用 as 来起别名

结合 webpack 使用 vue-router

1.安装 vue-router cnpm i vue-router -S

2.在 main.js中导入 vue-router 包 import VueRouter from 'vue-router'

3.在 main.js中手动安装 vue-router Vue.use(VueRouter)

4.创建路由对象 并 将路由对象挂载到 vm 实例上

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import app from './app.vue'
import account from './main/account.vue'
var router = new VueRouter({                                    
    routers: [
        { path: '/account.vue', account },
        { path: '/goodslist.vue', goodslist }
    ]
})
var vm = new Vue({
    el: '#app',
    render: c => c(app),
    router
})

注：(1) 如果在一个模块化工程中使用vue-router，必须通过Vue.use()明确的安装路由功能

(2) render 会把 el 指定的容器中，所有的内容都清空覆盖，所以不要把路由的 router-view 和 router-link 直接写到 el 所控制的元素中

(3) App 这个组件，是通过 VM 实例的 render 函数渲染出来的， render 函数如果要渲染组件，渲染出来的组件，只能放到 el:’#app’ 所制定的元素中；account 和 goodslist 组件，是通过路由匹配监听到的，所以这两个组件，只能展示到属于路由的 <router-view><、router-view>中去

结合webpack实现children子路由

1.在src文件夹下添加一个 subcom 文件夹，同时早subcom文件夹下创建两个 .vue 文件，一个是 login.vue 一个是 register.vue

2.在 main.js 中引入这两个文件，同时在将此配置成 account 的子路由

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import app from './app.vue'
import account from './main/account.vue'
import goodslist from './main/goodslist.vue'
import login from './subvue/login.vue'
import register from './subvue/register.vue'
var router = new VueRouter({
    routes: [{
            path: '/account.vue',
            component: account,
            children: [
                { path: 'login.vue', component: login },
                { path: 'register.vue', component: register }
            ]
        },
        { path: '/goodslist.vue', component: goodslist }
    ]
})
var vm = new Vue({
    el: '#app',
    render: c => c(app),
    router
})

简化形式：

在src的根目录下创建一个router.js文件
import VueRouter from 'vue-router'
import account from './main/account.vue'
import goodslist from './main/goodslist.vue'
import login from './subvue/login.vue'
import register from './subvue/register.vue'

var router = new VueRouter({
    routes: [{
            path: '/account',
            component: account,
            children: [
                { path: 'login', component: login },
                { path: 'register', component: register }
            ]
        },
        { path: '/goodslist', component: goodslist }
    ]
})

export default router  //将路由对象暴露出去

import Vue from 'vue'

import VueRouter from 'vue-router'

Vue.use(VueRouter)

import app from './app.vue'

import router from './router.js' //引入 router.js 暴露的 router

var vm = new Vue({
    el: '#app',
    render: c => c(app),
    router
})

注：把 webpack 打包时候的严格模式禁用掉：babel-plugin-transform-remove-strict-mode