vue腳手架的搭建及對SPA(單頁面開發)的理解
阿新 • • 發佈:2019-01-05
本文預設已經安裝nodejs
1.全域性安裝vue-cli
$ npm install --global vue-cli
2. 建立一個基於webpack模板的新專案$ vue init webpack new-project
3. 安裝依賴$ cd new-project
$ npm install
4. 執行腳手架$ npm run dev
5. 這樣就可以得到一個vue應用了. |-- build // 專案構建(webpack)相關程式碼 | |-- build.js // 生產環境構建程式碼 | |-- check-version.js // 檢查node、npm等版本 | |-- dev-client.js // 熱過載相關 | |-- dev-server.js // 構建本地伺服器 | |-- utils.js // 構建工具相關 | |-- webpack.base.conf.js // webpack基礎配置 | |-- webpack.dev.conf.js // webpack開發環境配置 | |-- webpack.prod.conf.js // webpack生產環境配置 |-- config // 專案開發環境配置 | |-- dev.env.js // 開發環境變數 | |-- index.js // 專案一些配置變數 | |-- prod.env.js // 生產環境變數 | |-- test.env.js // 測試環境變數 |-- src // 原始碼目錄 | |-- components // vue公共元件 | |-- store // vuex的狀態管理 | |-- App.vue // 頁面入口檔案 | |-- main.js // 程式入口檔案,載入各種公共元件 |-- static // 靜態檔案,比如一些圖片,json資料等 | |-- data // 群聊分析得到的資料用於資料視覺化 |-- .babelrc // ES6語法編譯配置 |-- .editorconfig // 定義程式碼格式 |-- .gitignore // git上傳需要忽略的檔案格式 |-- README.md // 專案說明 |-- favicon.ico |-- index.html // 入口頁面 |-- package.json // 專案基本資訊
6. 在index.html處有個id="app"的div,在App.vue中也有一個id="app"的div。頁面渲染的就是這個元件。
7. 在這個App.vue中有個router-view標籤,預設在這渲染當路由為"/"指向的元件
路由設定在src/router/index.js中
8. 這樣就可以使用HelloWorld元件了。
這張圖可以更清楚得讓大家明白router-view標籤的作用
*注意,當有多個元件的時候,就不是component屬性而是components,記得註冊的元件上面都要用import匯入
9. 當元件裡有自己的子元件的情況下,就需要使用到router-link標籤了,它其實是一個a標籤
10. 那麼我們怎麼根據路由渲染同級元件呢?
11. 如果我們想通過超連結的方式切換元件來實現切換頁面的效果呢?
12.那麼router-view和router-link的區別是什麼呢?
目前來說,router-link和router-view結合使用,可以在元件中通過點選渲染子元件;
單獨使用router-view就可以在當前元件中重根據name屬性選擇渲染元件;
單獨使用router-link就可以整個切換到to屬性指定路由的元件;
最後,這個單頁面開發的意思就是,這個專案只有index.html這個頁面,我們通過使用不同的元件像拼裝機器人一樣獲得不同的頁面展示,而src下的App.vue就是所有元件的父元件,所有其它元件都通過路由渲染到它裡面的router-view中,然後再將App.vue渲染到index.html中。
本人愚見,希望大牛指出錯誤。