VUE学习（七）——常见的loader模块、rander的使用、webpack使用vue和vue-router、ES6的导入与导出
一、常见的第三方loader模块
在webpack.config.js中配置
module: { // 配置所有第三方loader 模块的
rules: [ // 第三方模块的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 处理 less 文件的 loader
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理 scss 文件的 loader
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader
// limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
{ test:/\.vue$/, use: 'vue-loader' }// 加载vue
]
}
二、rander函数渲染组件
（一）在普通页面中使用rander渲染页面
<body>
<div id="app">
<p>444444p>
div>
<script>
var login = {
template: '这是登录组件
'
}
// 创建 Vue 实例，得到 ViewModel
var vm = new Vue({
el: '#app',
data: {},
methods: {},
render: function (createElements) { // createElements 是一个 方法，调用它，能够把 指定的 组件模板，渲染为 html 结构
return createElements(login)
// 注意：这里 return 的结果，会 替换页面中 el 指定的那个 容器
}
});
script>
body>
注：会替换整个页面的内容
（二）在webpack使用rander渲染页面
// 导入vue
import Vue from 'vue'
// 导入 login 组件
import login from './login.vue'
var vm = new Vue({
el: '#app',
data: {
msg: '123'
},
// components: { 在webpack中，这种能方式已经不能够使用
// login
// }
/* render: function (createElements) { // 在 webpack 中，如果想要通过 vue， 把一个组件放到页面中去展示，vm 实例中的 render 函数可以实现
return createElements(login)
} */
// 简写
render: c => c(login)
})
三、webpack中使用vue
- 安装vue的包：
cnpm i vue -S - 由于 在
webpack中，推荐使用.vue这个组件模板文件定义组件，所以，需要安装 能解析这种文件的 loader :cnpm i vue-loader vue-template-complier -D - 在
main.js中，导入vue模块import Vue from 'vue'// 在webpack 中尝试使用 Vue： // 注意： 在 webpack 中， 使用 import Vue from 'vue' 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供 像网页中那样的使用方式； import Vue from 'vue' 上面这种方式时，需要在 webpack.config.js 的 module.exports 中添加 resolve: { alias: { // 修改 Vue 被导入时候的包的路径 // "vue$": "vue/dist/vue.js" } } // 或则使用以下方式直接导入包 import Vue from '../node_modules/vue/dist/vue.js' - 定义一个
.vue结尾的组件，其中，组件有三部分组成：template 、script 、styletemplate:主要写html页面模板
script：永固处理业务逻辑
style：用于控制样式
1. scoped属性：使用scoped标签只控制自己组件的样式
2. lang属性： 普通的 style 标签只支持 普通的 样式，如果想要启用 scss 或 less ，需要为 style 元素，设置 lang 属性，如：lang=“scss” - 使用
import login from './login.vue'导入这个组件 - 创建 vm 的实例
var vm = new Vue({ el: '#app', render: c => c(login) }) - 在页面中创建一个
id为app的div元素，作为我们vm实例要控制的区域；
四、webpack使用vue-router
安装vue-router命令:
npm install vue-router
使用：
import Vue from 'vue'
// 1. 导入 vue-router 包
import VueRouter from 'vue-router'
// 2. 手动安装 VueRouter
Vue.use(VueRouter)
// 导入 app 组件
import app from './App.vue'
// 导入 Account 组件
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'
// 3. 创建路由对象
var router = new VueRouter({
routes: [
// account goodslist
{ path: '/account', component: account },
{ path: '/goodslist', component: goodslist }
]
})
var vm = new Vue({
el: '#app',
render: c => c(app), // render 会把 el 指定的容器中，所有的内容都清空覆盖，所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中
router // 4. 将路由对象挂载到 vm 上
})
在App.vue中：
这是 App 组件
Account
Goodslist
路由抽离：
讲路由相关的抽离出以关新的js文件
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
五、ES6导入导出
在 ES6中，也通过 规范的形式，规定了 ES6 中如何 导入 和 导出 模块
ES6中导入模块，使用 import 模块名称 from ‘模块标识符’ import ‘表示路径’
在 ES6 中，使用 export default 和 export 向外暴露成员：
var info = {
name: 'zs',
age: 20
}
export default info
export var title = '小星星'
export var content = '哈哈哈'
// 导入：
import m222, { title as title123, content } from './test.js'
console.log(m222)
console.log(title123 + ' --- ' + content)
注意：
- export default 向外暴露的成员，可以使用任意的变量来接收
- 在一个模块中，export default 只允许向外暴露1次
- 在一个模块中，可以同时使用 export default 和 export 向外暴露成员
- 使用 export 向外暴露的成员，只能使用 { } 的形式来接收，这种形式，叫做 【按需导出】
- export 可以向外暴露多个成员， 同时，如果某些成员，我们在 import 的时候，不需要，则可以 不在 {} 中定义
- 使用 export 导出的成员，必须严格按照 导出时候的名称，来使用 {} 按需接收；
- 使用 export 导出的成员，如果 就想 换个 名称来接收，可以使用 as 来起别名；