在普通网页中使用Vue:
1、使用script标签引入Vue的包
2、在index页面中创建一个id为app的div容器
3、通过new vue得到一个vm的实例
在使用webpack构建Vue项目前,要先对webpack基本用法及简单的配置了解。
webpack基本用法
在webpack中配置Vue组件页面的解析
1、cnpm i vue -S 将Vue安装为运行依赖
2、在main.js文件中导入Vue包 import Vue from 'vue'
3、由于在webpack中,推荐使用.vue这个组件模板文件定义组件,默认webpack无法打包.vue文件,所以需要安装能解析这种文件的loader :cnpm i vue-loader vue-template-compiler -D
注意:vue-loader,15.*版本之后的版本的使用都需要添加plugin的配置
4、cnpm i style-loader css-loader -D 将解析转换CSS的包安装为开发依赖,因为.vue文件中会写CSS样式
5、在webpack.config.js中配置规则
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader']},
{ test:/\.vue$/, use: 'vue-loader' }
]
},
6、定义一个.vue结尾的组件,其中组件有三部分组成: template script style
login.vue
<template>
<div>
<h1>登陆组件</h1>
</div>
</template>
<script>
export default {};
</script>
<style>
</style>
7、使用import login from './login.vue' 在main.js中导入这个组件
8、创建vm的实例 var vm = new Vue({ el: '#app', data:{ })
9、在页面中创建一个id为app的div元素,作为我们的vm实例要控制的区域
10、在vue中结合render函数渲染指定的组件到容器中
在利用webpack的Vue项目中,在main.js中使用import Vue from 'vue' 导入的Vue的包,功能不完善,只是提供了runtime-only的方式;所以,不能使用components组件的方式,向页面中渲染组件
在webpack中,如果想要通过Vue,把一个组件放到页面中去展示,vm实例中的render函数可以实现
// main.js 是项目的JS入口文件
import Vue from 'vue';
import login from './login.vue';
var vm = new Vue({
el: '#app',
data: {
msg: '1234'
},
render: c => c(login)
})