例1：在webpack使用web
安装vue
`cnpm i vue -S
在index.html使用插件表达式来访问vue实例中的数据
<div id="app">
{{msg}}
<login></login>
</div>
在main.js引入vue构造函数和创建实例
import Vue from 'vue'
var login = {
template: '<h3>这是登录组件</h3>'
}
var vm = new Vue({
el: '#app',
data: {
msg: '123'
},
methods: {},
components: {
login
}
})
结果
页面不显示数据，且有错误提醒
原因是在webpack中，使用import Vue from 'vue'导入的vue构造函数，功能不完整，只能提供runtime-only的方式。
即import vue from vue加载vue包的入口文件是vue.runtime.common.js
包查找规则：
项目根目录中有没有node_modules的文件夹，
在node_modules中根据包名，找到对应的vue文件，
在vue文件夹中，找package.json的包配置文件，
在package.json中，查找一个main属性（main属性指定了一个包在加载时的入口文件）
解决方式
- 在vue的package.json包配置文件,把main属性改为
"main": "dist/vue.js"(不推荐) - 修改路径
import Vue from 'vue/dist/vue.js' - 配置webpack.config.js
import Vue from 'vue' 在main.js中这里不变
resolve: {
alias:{ //修改vue导入时候，包的路径
// "vue$": "vue/dist/vue.js"
}
}
整个项目列表
例2：在webpck渲染组件
- 在webpack使用vue，在runtime-only 方式的情况下，页面中渲染一个组件（.vue），vue的实例的render函数可以实现
- 在index.html文件中
<div id="app"></div>
- 在main.js文件中
import Vue from 'vue'
import login from './login.vue'
var vm = new Vue({
el: '#app',
data: {
msg: '123'
},
methods: {},
// components: {
// login
// }
// render: function (createElements){
// return createElements(login)
// }
render: c => c(login)
})
- 在src目录下创建一个login.vue文件
<template>
<div>
<h1>这是登录组件，使用 .vue 文件定义出来的 --- {{msg}}</h1>
</div>
</template>
<script>
export default {
data() {
// 注意：组件中的 data 必须是 function
return {
msg: "123"
};
},
methods: {
show() {
console.log("调用了 login.vue 中的 show 方法");
}
}
};
</script>
<style>
</style>
- webpack无法打包.vue文件，需安装相关的loader，并在webpack.config.js中进行相关配置
cnpm i vue-loader vue-template-compiler -D
var VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
plugins: [ //配置插件
new VueLoaderPlugin()
],
module: { //配置loader
rules: [
{ test: /\.vue$/, use: 'vue-loader' }
]
}
}
- 结果如下
例3 在webpack使用vue-router(在例2基础上)
- 安装vue-router
cnpm i vue-router -D - main.js
import Vue from 'vue'
import app from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import account from './Account.vue'
import goodslist from './GoodsList.vue'
var router = new VueRouter({
routes: [ //路由规则
{ path: '/account', component: account },
{ path: '/goodslist', component: goodslist }
]
})
var vm = new Vue({
el: '#app',
render: c => c(app),
router //挂载路由
})
- Account.vue
<template>
<div>
<h1>这是一个account组件</h1>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
//普通style标签只支持css样式，要启动scss或less，要设置style元素的lang属性
body{
html{
font-style: italic
}
}
</style>
- GoodsList
<template>
<div>
<h1>这是一个goodslist组件</h1>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
div{
color: red;
}
</style>
- 结果
