[TOC] >[success] # webPack -- 自定義Vue操作 ~~~ 1.首先需要理解webpack--自定義配置章節中的 1.1'node 的包查找規則' 1.2'Runtime Only和Runtime+Compiler', 1.3'為什么使用的是render', 1.4'es6 導出和node導出' 2.一定不要迷糊在webpack中，main.js或者是js的文件入口不管他叫什么，為什么 在哪里寫的原因是，在打包的時候配置了要被打包的文件，這個如果就是被打包的 文件，所以所有東西最后到在這導入。 3.index.html 甚至其他名字的總html，為什么叫html入口，也是因為配置，文件最 后配置的html會在這集成。 ~~~ >[info] ## 開始配置 ~~~ . ├── dist // 打包后的文件 ├── src // 源碼文件 | ├── css | └── js | └── components // 存放組件的文件夾 | └── index.html // 這是打包后顯示的html總文件 | └── App.vue //所有組件路由在這在App.vue | └── main.js // 這是 main.js 是我們項目的JS入口文件 ├── package.json // npm init 生成的NPM包的所有相關信息，其中sprict可以腳本 ├── .babelrc //將高級語法轉換成低級語法 └── webpack.config.js // 配置webpack的配置文件 ~~~ >[danger] ##### 說明 ~~~ 1.根據'前端知識擴展' -- webpack 配置篇完成基礎配置后，在根據vue配置進行單獨 配置。 ~~~ >[danger] ##### 開始 ~~~ 1.安裝vue ： npm i vue -S 2.我們寫的vue組件都會以.vue形式結尾，已經在'前端擴展'中提到，webpack是基 于node，也就是說node 只認識'.js''.node''.json' 結尾的文件想使用就給配置： npm i vue-loader vue-template-compiler -D // 這里安裝了兩個包因為vue-loader 依賴vue-template-compiler 所以安裝兩個 3.在webpack.config.js 的module節點下rules數組配置是哪個vue的編譯規則 { test: /\.vue$/, use: 'vue-loader' } // 處理 .vue 文件的 loader ~~~ >[danger] ##### 對于使用import 導入vue注意點： ~~~ import Vue from 'vue' 1.根據上面的查找規則在vue在main屬性中的入口文件不是功能完整的文件， 導入的 Vue 構造函數，功能不完整，只提供了 runtime-only 的方式，并沒有 提供 像網頁中那樣的使用方式 2..因此解決方法有三種： 4.1 改變main 參數的入口文件地址改成vue.js 4.2 導入使用地址方式的引入，明確具體文件import Vue from '../node_modules/vue/dist/vue.js' 4.3在webpack.config.js 文件中配置節點點引入 resolve: { alias: { // 修改 Vue 被導入時候的包的路徑 "vue$": "vue/dist/vue.js" } } 3.但是正常情況下我們是不會去改變的而是使用render 去渲染，不會做上面三種 特別的配置 ~~~ * 使用render 渲染如下 ~~~ import Vue from 'vue' // 導入的組組件 import login from './login.vue' var vm = new Vue({ el:"#app", data:{ msg:"123" }, // 在 webpack 中，如果想要通過 vue， 把一個組件放到頁面中去展示，vm 實例中的 render 函數可以實現 // 用render 渲染的組建 /* render: function (createElements) { return createElements(login) } */ // 縮寫 render: c => c(login) }) ~~~ >[danger] ##### 在vue中.vue 結尾的組件格式如何書寫 ~~~ 1.組件vue-loader會把這三部分整合在一起 2.使用export default把組件對象暴露出去 ~~~ ~~~ <template> <div> <h1>這是登錄組件，使用 .vue 文件定義出來的 --- {{msg}}</h1> </div> </template> <script> export default { data() { // 注意：組件中的 data 必須是 function return { msg: "123" }; }, methods: { show() { console.log("調用了 login.vue 中的 show 方法"); } } }; </script> <style> </style> ~~~ >[danger] ##### 為什么頁面中有個app.vue的文件 ~~~ 1.首先如果沒有app.vue文件，我們在main.js 也就打包文件中引入Vue實例對象， 也在我們將要渲染的頁面index.html 加上了綁定的el，但是render渲染的頁面，只 會render的數據，其他數據都會被覆蓋，例如： <div id="app"> <!--雖然現在寫我了 但是實際加載沒有我--> <a></a> <!--我是render 渲染的組件 頁面只能有我在--> <login></login> </div> 2.因此創建了一個app.vue 文件在目錄下，這樣在main.js 渲染的是我們的app.vue 組件，我們在app.vue 這個組件中綁定路由，這樣在index.html中只要渲染 app.vue組件，砸死app.vue 整合其他組件： 3.剛才說了這么多讓我們重新看一下，按照新 思路寫的mian.js 中的vue實例 import app from './App.vue' var vm = new Vue({ el: '#app', render: c => c(app), router // 4. 將路由對象掛載到 vm 上 }) 4.看一下在app.vue寫的內容: <template> <div> <h1>app.vue</h1> <router-link to="/account" tag="span">登錄</router-link> <router-link to="/goodslist">注冊</router-link> <router-view></router-view> </div> </template> <script> </script> <style lang="scss" scoped> </style> 5.在index.html綁定的vue，dom中寫的內容 <div id="app"> <app></app> </div> ~~~ >[danger] ##### 配置路由 ~~~ 1.npm install vue-router 2.// 1. 導入 vue-router 包 import VueRouter from 'vue-router' // 2. 手動安裝 VueRouter Vue.use(VueRouter) 3.記得在vue實例去綁定這個路由 ~~~ >[danger] ##### 向后臺項目一樣吧路由抽離 ~~~ 1.在main.js 帶編譯js 中創建vue實例對象，使用render 渲染總的組件 2.路由負責 處理個個組件，單個組件可以依靠路由委托在總組件中 ~~~ ~~~ import VueRouter from 'vue-router' // 導入 Account 組件 import account from './main/Account.vue' import goodslist from './main/GoodsList.vue' // 導入Account的兩個子組件 import login from './subcom/login.vue' import register from './subcom/register.vue' // 3. 創建路由對象 var router = new VueRouter({ routes: [ // account goodslist { path: '/account', component: account, children: [ { path: 'login', component: login }, { path: 'register', component: register } ] }, { path: '/goodslist', component: goodslist } ] }) // 把路由對象暴露出去 export default router ~~~ >[success] # 這里還是要強調下 ~~~ 1.在整個項目src目錄中的js和html 都是我們配置webpack打包的目標文件，也就 是我們所說的入口文件，正因如此我們將一些引入包最后都匯集在這里 2.render 會把 el 指定的容器中，所有的內容都清空覆蓋，所以不要把路由的 router-view 和 router-link 直接寫到 el 所控制的元素中 3.組件， 是通過 路由匹配監聽到的，所以組件，只能展示到 屬于 路由的 <router-view></router-view> 中去； ~~~