步驟整理
- 安裝vue的包：
cnpm i vue -S - 由于 在 webpack 中突委，推薦使用 .vue 這個(gè)組件模板文件定義組件逆巍，所以惧辈，需要安裝 能解析這種文件的 loader
cnpm i vue-loader vue-template-complier -D - 在 main.js 中翁垂，導(dǎo)入 vue 模塊
import Vue from 'vue' - 定義一個(gè) .vue 結(jié)尾的組件忿墅，其中，組件有三部分組成：
template script style - 使用
import login from './login.vue'導(dǎo)入這個(gè)組件 - 創(chuàng)建 vm 的實(shí)例
var vm = new Vue({ el: '#app', render: c => c(login) }) - 在頁面中創(chuàng)建一個(gè) id 為 app 的 div 元素沮峡，作為我們 vm 實(shí)例要控制的區(qū)域；
代碼部分 webpack使用vue的幾種代碼方式
回顧包的查找規(guī)則
- 找項(xiàng)目根目錄中有沒有node_mudules的文件夾
- 在node_modules中根據(jù)包名亿柑， 找對(duì)應(yīng)的vue文件夾
- 在vue文件夾中找一個(gè)package.json的包配置文件查找main屬性【main屬性制定了這個(gè)包在被加載的時(shí)候的入口文件】
//如何在webpack
//在webpack中嘗試使用Vue
//[注意]: 在webpack中使用import Vue from 'Vue'導(dǎo)入的Vue構(gòu)造函數(shù)邢疙，功能并不完整，只提供了runtime-only的方式望薄，并沒有提供網(wǎng)頁中的使用方式
// import Vue from '../node_modules/vue/dist/vue.js'
import Vue from 'vue'
/*
回顧包的查找規(guī)則
1. 找項(xiàng)目根目錄中有沒有node_mudules的文件夾
2. 在node_modules中根據(jù)包名疟游， 找對(duì)應(yīng)的vue文件夾
3. 在vue文件夾中找一個(gè)package.json的包配置文件查找main屬性【main屬性制定了這個(gè)包在被加載的時(shí)候的入口文件】
*/
import login from './login.vue'
// 默認(rèn) webpack無法打包vue文件， 需要安裝相關(guān)的loader
// cnpm i vue-loader vue-template-compiler -D
// var login = {
// template: '<h1>這是login組件痕支，是用網(wǎng)頁中的形式創(chuàng)建出來的</h1>'
// }
var vm = new Vue({
el: '#app',
data: {
msg: '123'
},
methods: {
},
// components: {
// login
// }
/*
render: function(createElements){
//在webpack中如果想要通過vue把一個(gè)組件放到頁面中展示颁虐， vm實(shí)例中render函數(shù)可以實(shí)現(xiàn)
return createElements(login)
}
*/
render: c => c(login) //簡(jiǎn)寫形式
})
