1,普通網(wǎng)頁(yè)使用方式

2,webpack 導(dǎo)入vue

npm install vue -S

第一種：js文件直接導(dǎo)入

第二種：js文件引入// import Vue from 'vue'

webpack.config.js中配置：

resolve: {

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

}

兩種方式都可以在html文件中正常使用

2,使用.vue文件

login.vue文件內(nèi)容如下：

在main.js文件中使用如下語(yǔ)句引入：

import logfrom '../login.vue'

需要配置vue-loader：

安裝： npm i vue-loader vue-template-compiler -D

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

此時(shí)運(yùn)行會(huì)報(bào)錯(cuò)：

解決：配置vueLoaderPlugin

此種方式加載的template不能在components中使用，只能使用render

3,export default和export使用

test.js中 export default使用

export使用

調(diào)用：

node中：

4，webpack中router使用

安裝：npm i vue-router? -S

使用：1，導(dǎo)包 import VueRouterfrom 'vue-router'

? ? ? ? ? ?2，手動(dòng)安裝router? Vue.use(VueRouter)

? ? ? ? ? ?3，創(chuàng)建路由對(duì)象

? ? ? ? ? ?4，將路由對(duì)象掛載到vm上

? ? ? ? ? ?5，render會(huì)覆蓋el中的內(nèi)容，所以router-view不能放到頁(yè)面中的el范圍

? ? ? ? ? ? 6，配置子路由

5，lang 和scoped

插件：Vutur和? Vue Snippets