vue實戰（2）：初始化項目、搭建底部導航路由

時間 2019-12-16

原文原文鏈接

循序漸進

通過上篇整理，欠缺的知識還挺多，不過不要緊，一邊學習一邊作項目，不耽誤事，直接造起來。css

0. 其它

vue實戰（1）：準備與資料整理
 vue實戰（2）：初始化項目、搭建底部導航路由
 vue實戰（3）：底部導航顯示、搭建各模塊靜態頁面、添加登陸頁頁面與路由
 vue實戰（4）：postman測試數據、封裝ajax、使用vuex管理狀態
 vue實戰（5）：總結一
 vue實戰（6）：異步顯示數據、開發Star組件
 vue實戰（7）：完整開發登陸頁面（一）
vue實戰（8）：完整開發登陸頁面（二）
vue實戰（9）：總結二
 vue實戰（10）：開發店鋪詳情（一）html

1. 資源準備

須要準備一些iconfont字體圖標
- 在阿里巴巴矢量圖庫建立帳號
- 建立一個項目庫
- 找適用的圖標加入項目庫（儘可能找風格一致的圖標）
- 下載至本地，備用（不過項目中，使用的是直接引用）
  - 生成在線連接引用

  -<!--就是這樣的引用-->
  -<link rel="stylesheet" href="http://at.alicdn.com/t/font_1164733_nm0sbyigtqs.css">

2. `vue-cli3` 初始化項目

命令行詳細步驟
 vue ui搭建項目詳細步驟vue

2.1 使用命令
  - windows+R 打開命令窗口
  - 全局安裝 npm install -g @vue/cli
  - 在新文件夾下建立項目 vue create myshop (vue create 項目名字)
   
2.2 使用vue ui
  - windows+R 打開命令窗口
  - 全局安裝 npm install -g @vue/cli
  - 輸入 vue ui
  - 瀏覽器打開可視化頁面，建立項目

項目目錄

|-- src                       - 源碼目錄
|   |---- components          - 非路由組件文件夾
|   |---- api                 - 與後臺交互模塊文件夾
|   |---- assets              - 通用資源文件夾，如fonts/img/stylus
|   |---- router              - vue的路由管理文件夾
|   |---- filters             - 自定義過濾器模塊文件夾
|   |---- mock                - 模擬數據接口文件夾
|   |---- pages               - 路由組件文件夾
|   |---- store               - vuex相關模塊文件夾
|   |---- views               - 項目佈局相關文件夾
|   |---- App.vue             - 頁面入口文件
|   |---- main.js             - 程序入口文件，加載各類公共組件
|-- public                    - 靜態文件，好比一些圖片，json數據等
|   |---- favicon.ico         - 圖標文件
|   |---- index.html          - 入口頁面
|-- .babelrc                  - ES6語法編譯配置
|-- .editorconfig             - 定義代碼格式
|-- .gitignore                - git上傳須要忽略的文件格式
|-- .postcsssrc               - postcss配置文件
|-- README.md                 - 項目說明
|-- package.json              - 項目基本信息,包依賴信息等

搭建項目

安裝stylus依賴包（安裝項目時如已經配置，則不用再安裝）
stylus教程-張鑫旭-鑫空間-鑫生活

npm install stylus stylus-loader --save-dev

引用公用的stylus文件
搭建結構

|-- components                       - 非路由組件文件夾
     |---- FooterGuide          - 底部組件文件夾
            |---- FooterGuide.vue          - 底部組件
|-- views                       - 項目結構組件文件夾
     |---- Msite          - 首頁組件文件夾
            |---- Msite.vue          - 首頁組件
     |---- Search          - 搜索組件文件夾
            |---- Search.vue          - 搜索組件
     |---- Order          - 訂單組件文件夾
            |---- Order.vue          - 訂單組件
     |---- Profile          - 我的組件文件夾
            |---- Profile.vue          -我的組件

引入reset文件（公用css）
index.html 中引入 <link rel="stylesheet" href="/static/css/reset.css">

移動端git

1. viewport
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
2. 解決點擊響應延時0.3s問題
<script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
<script>
if ('addEventListener' in document) {
   document.addEventListener('DOMContentLoaded', function() {
   FastClick.attach(document.body);
   }, false);
}
if(!window.Promise) {
   document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js" '+'>'+'<'+'/'+'script>');
 }
</script>