webpack结合Vue使用

1,普通网页使用方式

2,webpack 导入vue

npm install vue -S

第一种:js文件直接导入

第二种:js文件引入// import Vue from 'vue'

webpack.config.js中配置:

resolve: {

    alias: {"vue$":"vue/dist/vue.js"}

}

两种方式都可以在html文件中正常使用


2,使用.vue文件

login.vue文件内容如下:

在main.js文件中使用如下语句引入:

import logfrom '../login.vue'

需要配置vue-loader:

安装: npm i vue-loader vue-template-compiler -D

配置:{test: /\.vue$/, use: 'vue-loader'}

此时运行会报错:

解决:配置vueLoaderPlugin

此种方式加载的template不能在components中使用,只能使用render

3,export default和export使用


test.js中 export default使用

export使用

调用:


node中:


4,webpack中router使用

安装:npm i vue-router  -S

使用:1,导包 import VueRouterfrom 'vue-router'

           2,手动安装router  Vue.use(VueRouter)

           3,创建路由对象

           4,将路由对象挂载到vm上

           5,render会覆盖el中的内容,所以router-view不能放到页面中的el范围

            6,配置子路由

5,lang 和scoped

插件:Vutur和  Vue Snippets

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容