vue-cli及vue-router(一)
1.單檔案元件
(1)問題:
使用 Vue.component 來定義全域性元件,緊接著用 new Vue({ el: ‘#container ‘}) 在每個頁面內指定一個容器元素。當在更復雜的專案中,或者你的前端完全由 JavaScript 驅動的時候,這種做法的缺點很多:- 全域性定義 (Global definitions) 強制要求每個 component 中的命名不得重複
- 字串模板 (String templates) 缺乏語法高亮,在 HTML 有多行的時候,需要用到醜陋的 \
- 不支援 CSS (No CSS support) 意味著當 HTML 和 JavaScript 元件化時,CSS 明顯被遺漏
- 沒有構建步驟 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用前處理器,如 Pug (formerly Jade) 和 Babel。
- (2)單檔案元件
副檔名為 .vue 的 single-file components(單檔案元件) 為以上所有問題提供瞭解決方法,並且還可以使用 webpack 或 Browserify 等構建工具。 - (3)解析打包.vue檔案
vue為了能夠使我們在專案開發中對元件進行更好的維護,提供了一個單檔案元件系統,vue把每一個獨立的元件放在一個.vue的檔案中,在這個檔案中提供基礎三個自定義標籤:
- template
- script
- style
來放置元件不同的內容塊,但是因為瀏覽器不能夠直接去識別該檔案型別,所以我們需要通過webpack來進行編譯打包,官方提供了一個對 .vue 檔案進行處理的loader:vue-loader。
(4)注意:如果出現瞭如下的提示:
ERROR in ./src/Hello.vue
Module build failed: Error: Cannot find module ‘vue-template-compiler’
還需下載“vue-template-compiler”第三方模組並引入。<code> <template> <h1>{{message}}</h1> </template> <script> export default { name: 'hello', data() { return { message: 'Hello Miaov' } } } </script> <style></style> </code>
2.vue-cli
vue實際開發使用 .vue 的但元件系統來實現,但是不能適應實際複雜的需求,我們還需要配置很多的一些東西來和 .vue 進行融合,這個配置很繁瑣,所以官方提供了一個工具,幫助我們來構建一個專案開發過程中必須使用的一些內容,這個工具:vue-cli,通過這個工具我們就可以很方便的來建立一個基於vue的專案,我們也把這個工具稱為 腳手架。
Vue.js 提供一個官方命令列工具,可用於快速搭建大型單頁應用。該工具提供開箱即用的構建工具配置,帶來現代化的前端開發流程。只需幾分鐘即可建立並啟動一個帶熱過載、儲存時靜態檢查以及可用於生產環境的構建配置的專案:
安裝
前提:先安裝npm或yarn。
npm install vue-cli -g或yarn global add vue-cli命令。
vue-cli的構建
當我們通過上述方式安裝好vue的腳手架以後,我們就可以在命令列中使用一個命令:vue(該命令是沒有-cli的)
1.vue-cli建立步驟:
(1)vue init
- init:初始化(建立)基於vue的專案
- :要構建的專案的名稱
如:vue init webpack hello:基於webpack來構建一個名稱為hello的vue專案(專案構建一定要聯網!聯網!聯網!)
vue-cli是一個互動式命令列,通過vue命令構建專案會需要我們填寫一些專案的資訊:
- (2)Project Name:要建立的專案名稱(該命令會生產一個package.json檔案,檔案中的name選項就是這個ProjectName,預設為當前建立的專案目錄名稱,也可以自行制定(但是需要符合package.json中name命名規則,不要出現大寫字母,空格,下劃線,可以使用 - )
- (3)Project Description:專案簡介,也會出現在package.json檔案中,可選
- (4)Author:作者,可選
- (5)下一步直接回車
- (6)nstall vue-router:是否安裝vue路由元件,做專案的話一定要安裝;
- (7)Use ESLint to lint your code:是否需要使用ESLint模組進行程式碼檢測。語法檢測工具,一般正規的專案團隊中需要安裝,個人專案看自己的使用情況決定
- (8)Setup unit tests with Karma + Mocha?:是否安裝測試(單元測試)
- (9)Setup e2e tests with Nightwatch?:是否安裝端到端的測試
完成上面步驟,over!
- 下載依賴包:”npm install”
通過vue-cli完成配置以後,下一步需要安裝vue所需要的依賴包,在該建立好的專案目錄中,執行”npm install”命令。
專案需要安裝的依賴包在vue-cli工具自動生成的package.json檔案中有說明:
- dependencies:專案中實際需要使用到的依賴包
- devDependencies:專案開發過程中需要使用的一些工具包,不是專案實際線上程式碼的一部分。
- 2.執行
所需要的安裝依賴包安裝完成以後,就可以啟動專案,執行
- yarn run dev / npm run dev:開啟一個測試開發環境。會開啟一個本地伺服器,我們就可以通過該伺服器環境去訪問當前這個專案。
- yarn run build/npm run build:
構建專案,把專案進行編譯、打包,生成的檔案預設存放在dist目錄下。我們可以把專案打包後的檔案上傳到伺服器,就是我們在線上執行需要的程式碼。 - 介面:如果是首次執行,那麼會看到一個歡迎頁面,下面我們就可以進行專案開發。
3.生成的專案的目錄結構
- (1) build目錄:構建專案命令所需要使用到的工具相關的指令碼檔案和配置檔案
- (2) config目錄:在vue-cli中會自動安裝一個小型的express搭建的熱過載web伺服器,config裡面就是關於這個伺服器的相關配置
- (3) dist目錄:專案編譯構建上線後的存放目錄
- (4) node_modules目錄:專案依賴包存放目錄
(5) src 目錄:專案原始碼存放目錄
main.js:vue腳手架為我們自動生成的專案中設定的入口檔案,在該入口檔案中,做了一些專案初始化的工作- 引入 Vue
- 引入必要的元件
建立Vue例項
<code> // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. // 匯入 Vue 框架 import Vue from 'vue' // 匯入 App 元件物件 import App from './App'; import router from './router/index'; // 設定專案開發提示 Vue.config.productionTip = false; // 建立Vue例項物件 new Vue({ el: '#app', // router: router, router, template: '<App/>', components: { App } }) </code>
- (6) static目錄:配置靜態資源(內建的web伺服器對應)存放目錄
在專案開發過程中,我們的大部分任務是在src這個目錄下完成的。
2.路由
需求
當我們的應用變得複雜了以後,涉及到的頁面也會變多,邏輯也會變複雜,原來我們是通過多頁面的方式來組織和維護我們的網站,但是這樣的使用者體驗不是太好(因為會重新整理或跳轉頁面),為了解決使用者體驗問題,最好的方式,資料(頁面會發生變化),但是不需要跳轉、重新整理。
- 通過ajax非同步無重新整理獲取資料
- 獲取到資料以後通過vue來處理和管理還有渲染頁面。
什麼情況下獲取資料渲染頁面?
傳統的處理方式:通過url重新發送請求得到新的資料和頁面,獲取什麼頁面資料由url來決定,使用了單頁面開發模式的話,就不能再使用頁面跳轉,但是可以使用url中的hash值的變化來決定獲取什麼內容渲染什麼頁面。
所以一個url的hash對應一個檢視,那麼我們就需要設定hash和檢視的關係,我們可以把hash和view做一個對應關係(對映)
- 設定hash-view的map(對映)關係
- 監聽hash變化
- 當hash值變化的時候,根據map找到對應的元件來渲染檢視。
vue為我們提供了一個第三方的框架來實現上述的功能:vue-router
上面我們提到的 地址-檢視 的對映:路由
vue-router
- 1.安裝:
npm install vue-router / yarn add vue-router.
若在構建vue-cli的時候,在詢問“nstall vue-router”(是否安裝vue-router)時,選擇“Y”,這裡就不用重複安裝vue-router。 2.配置路由步驟:
(1) 配置: “router/index.js”
- 匯入 vue-router
- 把vue-router作為外掛呼叫:Vue.use();
Vue.use( plugin )
引數:{Object | Function}
用法:
安裝 Vue.js 外掛。如果外掛是一個物件,必須提供 install 方法。如果外掛是一個函式,它會被作為 install 方法。install 方法將被作為 Vue 的引數呼叫。
也就是說,“plugin”必須提供一個install方法以供vue自動呼叫。
- new Router()得到一個路由物件,並把該物件新增到Vue例項的router屬性中
new Router()需要傳入一個配置物件,該物件中包含一個routes的屬性,這個屬性就儲存了路由元件的對映關係
<code> import Vue from 'vue'; import VueRouter from 'vue-router'; import Register from '@/components/Register'; import Login from '@/components/Login'; // 註冊vue-router元件到Vue例項中,才能在元件中使用 <router-view /> 元件</br> Vue.use(VueRouter); // 建立一個vuerouter例項物件,用來處理路由和元件的對映,該建構函式接受一個物件,其中routes export default new VueRouter({ routes: [ { //路由路徑 path: '/register', //路由名稱(非必須) name:"reg", //路由元件 component: Register }, { path: '/login', name:"login", component: Login } ] }); </code>
(2) “main.js”
- import router from ‘./router/index’;
在vue例項中新增“router: router”屬性。
<code> import Vue from 'vue'; import App from './App'; import router from './router/index'; new Vue({ el: '#app', //router: router, router, template: '<App/>', components: { App } }) </code>
(3) “App.vue”
渲染和當前url中匹配的路由元件:“”。
vue-router會把和當前匹配路由元件拿取出來,替換這裡的router-view。<code> <template> <div id="app"> <List :data="searchUsers" /> // router-view:用來放置和當前url地址匹配的元件內容 <router-view></router-view> </div> </template> <script></script> <!--scoped:設定該屬性,那麼style中的樣式只對當前元件中的元素產生影響--> <style scoped> ul li { color: red; } </style> </code>
注意:
- (a).vue2.5版本支援大寫的HTML標籤,如上文程式碼“”;
vue2.0還是烤串寫法; - (b).“App.vue”檔案匯入時,可以不寫副檔名,是因為在“bulid/webpack.base.conf.js”檔案中,已幫我們解析好;
(c).在 “router/index.js”中,“import Login from ‘@/components/Login’;”,
“@”指的是src目錄,也是在在“bulid/webpack.base.conf.js”檔案已幫我們定義好。
<code> resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), } }, </code>
- (a).vue2.5版本支援大寫的HTML標籤,如上文程式碼“”;
- (d).在上述程式碼中,”
<style scoped></style>
“,
單檔案元件讓你可以在同一個檔案裡完全控制 CSS,將其作為元件程式碼的一部分。
這個可選 scoped 屬性會自動新增一個唯一的屬性 (比如 data-v-21e5b78) 為元件
內 CSS 指定作用域,編譯的時候 .list-container:hover 會被編譯成類似 .list-container[data-v-21e5b78]:hover。
這裡的數字是隨機生成的。