回顾
我们是如何在网页中使用vue的呢
1.使用script引入vue包
2.在index中创建一个id为app的div容器
3.new一个Vue实例
在webpack中尝试使用Vue
image.png
在main.js中引入vue模块
// 注意：这里导入的Vue功能不完整，并没有提供像网页中使用那样的全部功能
import Vue from 'vue'
var vm = new Vue({
el : '#app',
data : {
msg : 'testMsg'
}
})
我们cnpm run dev运行项目，页面会报错，因为这里导入的Vue不是完整文件
解决方式：
在webpack.config.js中进行配置（推荐）
resolve: {
alias: {
'vue$': 'vue/dist/vue.js' // 指定真正的vue文件
}
}
或者在main.js中
import Vue from '../node_modules/vue/dist/vue.js'
再或者在node-modules中vue中修改package.json中的main属性为dist/vue.js
运行cnpm run dev进行测试
单文件组件的应用
比如我们想在index.html中渲染一个简单的组件
新建vue文件,这个文件本身就代表一个组件，它包含template,script,style三个部分
image.png
login.vue
<template>
<div>
<h1>这是login单文件组件</h1>
</div>
</template>
<script>
</script>
<style>
</style>
在main.js中导入这个组件
import Vue from 'vue'
// 导入login组件
import login from './login.vue'
var vm = new Vue({
el : '#app',
data : {
msg : 'testMsg'
},
// 注意：这里不要使用components注册组件，选择使用render函数
// 注意 ：这里不能使用以前那种components的注册方式，要使用render函数进行渲染
render : c => c(login)
})
cnpm i vue -S将vue安装为运行依赖
cnpm i vue-loader vue-template-compiler -D将解析转换vue的包安装为开发依赖
cnpm i style-loader css-loader -D将解析转换CSS的包安装为开发依赖，因为.vue文件中会写CSS样式
在webpack.config.js中，添加如下module规则：
// 导入VueLoaderPlugin
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// module添加文件的匹配规则
{ test: /\.vue$/, use: 'vue-loader' },
// plugins添加plugins节点配置插件
new VueLoaderPlugin(),
具体如下
// 导入处理路径的模块
var path = require('path');
// 导入自动生成HTMl文件的插件
var htmlWebpackPlugin = require('html-webpack-plugin');
// 导入VueLoaderPlugin
const VueLoaderPlugin = require('vue-loader/lib/plugin');
// 导出一个配置对象，将来webpack在启动的时候，会默认来查找webpack.config.js，并读取这个文件中导出的配置对象，来进行打包处理
module.exports = {
entry: path.resolve(__dirname, 'src/main.js'), // 项目入口文件
output: { // 配置输出选项
path: path.resolve(__dirname, 'dist'), // 配置输出的路径
filename: 'bundle.js' // 配置输出的文件名
},
plugins:[ // 添加plugins节点配置插件
new htmlWebpackPlugin({
template:path.resolve(__dirname, 'src/index.html'),//模板路径
filename:'index.html'//自动生成的HTML文件的名称
}),
new VueLoaderPlugin(),
],
module: { // 用来配置第三方loader模块的
rules: [ // 文件的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },//处理css文件的规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.(png|jpg|gif)$/, use: 'url-loader' },
{ test: /\.vue$/, use: 'vue-loader' },
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.js' // 指定真正的vue文件
}
}
}
运行cnpm run dev运行看到效果
小结在webpack中如何使用 vue ：
1.安装 vue 包 ： cnpm i vue -S
2.由于在webpack中推荐使用.vue组件模板文件定义组件，所以，需要安装能解析这种文件的loader : cnpm i vue-loader vue-template-compiler -D
3.在main.js中，导入vue模块 ：import Vue from 'vue'
4.在webpack.config.js中导入vueloader的配置信息
5.定义一个.vue结尾的组件，三部分构成template,style,script
6.在main.js中，导入组件模块 ：import login from './login.vue'
7.创建vm实例,渲染组件
var vm = new Vue({
el : '#app',
data : {
msg : 'testMsg'
},
// 注意：这里不要使用components注册组件，选择使用render函数
render : c => c(login)
})
8.在index.html中创建一个id为app的div元素，作为vm实例的挂在元素
vue组件文件中如何定义自己的数据
login.vue
<template>
<div>
<h1>这是login单文件组件 -- {{msg}}</h1>
</div>
</template>
<script>
export default { // 组件中的data必须是一个function
data() {
return {
msg : '123'
}
},
methods : {
show(){
console.log("调用了 login.vue 的show方法");
}
}
}
</script>
<style>
</style>
运行cnpm run dev查看结果
在es6中使用export default 和 export 向外暴露成员
export default向外只能暴露一个成员,导入时使用import 自定义名称 from 文件名导入
export 可以暴露多个，导入时使用import {对应名}[as 别名] from 文件名导入
.
网友评论