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