前置條件:
- 熟悉使用 Javascript + HTML5 + css3。
- 理解 ES2015 Module 模塊(export、import、export-default)。
- 瞭解 nodejs 基礎知識,npm 常用命令,以及 npm script 使用 (vue 項目中使用 npm 進行包管理)。
- 瞭解 webpack 打包工具 (常用配置選項以及 loader 概念)。(webpack webpack.github.io/ 是一個模塊打包工具。它將一堆文件中的每個文件都作爲一個模塊,找出它們的依賴關係,將它們打包爲可部署的靜態資源。webpack 的使用也需要 npm 的安裝方式)。
開始安裝:
使用 vue-cli 構建大型單頁應用:vue.js 的腳手架工具。
執行下述代碼,即可完成項目基礎構建(已配置好 webpack、依賴包的安裝、基本目錄的生成)。
1 2 3 4 5 6 7 8 |
|
主要目錄:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
package.json文件說明:項目的描述和依賴
1. scripts:編譯項目的一些命令
例:執行 npm run dev
,即執行 scripts 中對應的 node build/dev-server.js
。
2. dependencies:項目發佈時的依賴
例:執行 npm install wx --save
,即安裝依賴模塊 wx。
3. devDependencies:項目開發時的依賴
例:執行 npm install sass --save-dev
,即安裝依賴模塊 sass。
附:npm 相關說明:
npm 爲 Node.js 版本管理和依賴包管理工具,通過 node 環境來安裝前端構建項目所需依賴包。
npm 安裝下載速度過慢,使用淘寶鏡像 cnpm install
快速安裝。設置方法:
1 |
|
項目加載過程:
1. index.html 頁面
當前構建項目爲 SPA (單頁面應用),index.html 頁面即爲入口頁面,進行meta 等相關頁面配置。
該頁面的 <div id="app"></div>
掛載了主組件。
2. main.js:主入口文件
注: 在 webpack.base.config
中設置 -> entry: { app: './src/main.js'}
該文件初始化 vue 實例並引入相應模塊 (引入前需確認在 package.json 中進行配置並安裝),附 main.js 引入及說明:
1 2 3 4 |
|
3. App.vue:主組件
在 index.html 入口頁面中掛載了主組件,並在 main.js 主入口文件中引入了主組件。
創建了其他組件 (例: /src/components/xxx.vue )後,通過路由配置即可渲染在當前主組件中。
4. 路由配置 vue-router
路由配置:將組件 (components) 映射到路由 (routes),然後告訴 vue-router 在哪裏渲染它們
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
|