Vue 基础 day06 webpack 3.x 结合vue

在普通页面使用 render 函数渲染组件

var login = {
  template: '<h3>login</h3>'
}
var vm = new Vue({
  // createElement 是一个方法, 调用它能够把指定的模板渲染成html页面
  render: function (createElement, context) {
    return createElement(login);
  }
}).$mount('#app');
// render 和 components 的区别
// components: 类似于 指令 插件表达式 不会只替换自己所在的区域
// reder: 类似于指令 v-text 会把所有内容都替换 (包括 #app)

如何在 webpack 中 使用和 html 中一样的 vue.js

1. 安装 vue 运行依赖

npm install vue -S

1. 导入 vue 包

// 注意: 使用 import Vue from 'vue' 导入的 Vue 构造函数, 功能不完整, 只提供了 runtime-only 的方式, 并没有提供像网页中那样使用的方式
import Vue from 'vue'
/**
 * 包查找规则:
 *  1. 找 项目根目录中有没有 node_modules 的文件夹
 *  2. 在 node_modules 中根据包名, 找对应的 vue 文件夹
 *  3. 在 vue 文件夹中, 找一个叫做 package.json 的包配置文件
 *  4. 在 package.json 文件中, 查找一个 main 属性 [main属性指定了这个包在被加载的时候 的入口文件]
 */

1. 创建 vue 实例对象

var vm = new Vue({
  data: {
    msg: 123
  }
}).$mount('#app');

1. 配置 webpack.config.js 文件

module.exports = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.js'
    }
  }
};

1. html 页面内正常使用即可

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

1. 安装解析 .vue 文件 所需的 loader

npm install vue-loader vue-template-compiler -D

1. 配置 webpack.config.js

// 注意了 如果 vue-loader 版本为 15+, 那么必须配置 VueLoaderPlugin
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
  plugins: [
    new VueLoaderPlugin()
  ],
  module: {
    rules: [
      {path: /\.vue$/, use: 'vue-loader'}
    ]
  }
}

1. 导入 vue 模块
2. 定义一个 .vue 结尾的模板文件 其中组件由三部分组成

<template>
  <div>
    <h3> vue 文件创建的 组件 </h3>
  </div>
</template>
<script></script>
<style></style>

1. 使用 import 导入这个组件
2. 创建 vm 实例 使用render 函数

var vm = new Vue({
  el: '#app',
  render: createElement => createElement(login);
});

补充 ES6 模块导入导出 语法

/**
 * export default / export 和 import * from * / import *  属于 ES6 一组
 * exports 和 require 属于 Node 一组  不要混用
 */
// 1. export default 一个文件内只允许使用一次
// 2. export default 可以和 export 一起使用
// 3. export default 导入方式 import 引用名称 from 文件路径
export default {
  name: 'zs',
  age: 20
}
// 1. export 一个文件内可以被多次导出 [按需导出]
// 2. export 导入方式 import {引用名称} from 文件路径
// 3. 如果导出多个 可以使用逗号隔开 import {name, age} from 文件路径
// 4. export 导入必须 和定义时使用一样的名字, 如果要更改 可以在导入时起别名  import {name as n} from 文件路径
export var name = 'zs';
export var age = 12;

在 vue 中使用 vue-router

1. 导入 vue import Vue from 'vue'
2. 下载 vue-router npm install vue-router -S
3. 导入 router import VueRouter from 'vue-router'
4. 创建路由实例对象

// 必须使用 vue.use()
Vue.use(VueRouter);
var router = new VueRouter({
  routes: [
    {path: '/account', component: account},
    {path: '/goodslist', component: goodlist}
  ]
});

1. 创建 vue 实例对象 挂载 router

var vm = new Vue({

}).$mount('#app');

1. 创建组件文件 并且导入 import account from './main/account.vue'
2. 运行项目

嵌套路由

// 导入 login 增加 children 属性
import login from './login.vue'
Vue.use(VueRouter);
var router = new VueRouter({
  routes: [
    {
      path: '/account',
      component: account,
      children: [
        {path: 'login', component: login }
      ]
    },
    {path: '/goodslist', component: goodlist}
  ]
});

抽离路由

把除去 Vue.use() 的其他路由依赖 都抽离到一个文件中, 最后 使用 export default router 把路由对象导出, 再由main 文件接收使用

.vue 文件中的 style

/* 如果不指定 就是 普通的css  如果需要使用 less 或 scss 就需要指定 lang 属性值
scoped 是指 样式只在 组件内部生效 */
<style lang="less" scoped></style>