按部就班
經(jīng)過上篇整理锨匆，欠缺的知識(shí)還挺多私痹，不過沒關(guān)系，一邊學(xué)習(xí)一邊做項(xiàng)目统刮，不耽誤事紊遵，直接造起來(lái)。
0. 其它
vue實(shí)戰(zhàn)（1）：準(zhǔn)備與資料整理
vue實(shí)戰(zhàn)（2）：初始化項(xiàng)目侥蒙、搭建底部導(dǎo)航路由
vue實(shí)戰(zhàn)（3）：底部導(dǎo)航顯示暗膜、搭建各模塊靜態(tài)頁(yè)面、添加登錄頁(yè)頁(yè)面與路由
vue實(shí)戰(zhàn)（4）：postman測(cè)試數(shù)據(jù)鞭衩、封裝ajax学搜、使用vuex管理狀態(tài)
vue實(shí)戰(zhàn)（5）：總結(jié)一
vue實(shí)戰(zhàn)（6）：異步顯示數(shù)據(jù)、開發(fā)Star組件
vue實(shí)戰(zhàn)（7）：完整開發(fā)登錄頁(yè)面（一）
vue實(shí)戰(zhàn)（8）：完整開發(fā)登錄頁(yè)面（二）
vue實(shí)戰(zhàn)（9）：總結(jié)二
vue實(shí)戰(zhàn)（10）：開發(fā)店鋪詳情（一）
vue實(shí)戰(zhàn)（11）：開發(fā)店鋪詳情（二）
vue實(shí)戰(zhàn)（12）：完結(jié) + 附學(xué)習(xí)視頻
1. 資源準(zhǔn)備
需要準(zhǔn)備一些iconfont字體圖標(biāo)
- 在阿里巴巴矢量圖庫(kù)創(chuàng)建賬號(hào)
- 創(chuàng)建一個(gè)項(xiàng)目庫(kù)
- 找適用的圖標(biāo)加入項(xiàng)目庫(kù)（盡量找風(fēng)格一致的圖標(biāo)）
- 下載至本地论衍，備用（不過項(xiàng)目中瑞佩，使用的是直接引用）
- 生成在線鏈接引用
-<!--就是這樣的引用-->
-<link rel="stylesheet" >
2. vue-cli3 初始化項(xiàng)目
命令行詳細(xì)步驟
vue ui搭建項(xiàng)目詳細(xì)步驟
2.1 使用命令
- windows+R 打開命令窗口
- 全局安裝 npm install -g @vue/cli
- 在新文件夾下創(chuàng)建項(xiàng)目 vue create myshop (vue create 項(xiàng)目名字)
2.2 使用vue ui
- windows+R 打開命令窗口
- 全局安裝 npm install -g @vue/cli
- 輸入 vue ui
- 瀏覽器打開可視化頁(yè)面，創(chuàng)建項(xiàng)目
項(xiàng)目目錄
|-- src - 源碼目錄
| |---- components - 非路由組件文件夾
| |---- api - 與后臺(tái)交互模塊文件夾
| |---- assets - 通用資源文件夾坯台，如fonts/img/stylus
| |---- router - vue的路由管理文件夾
| |---- filters - 自定義過濾器模塊文件夾
| |---- mock - 模擬數(shù)據(jù)接口文件夾
| |---- pages - 路由組件文件夾
| |---- store - vuex相關(guān)模塊文件夾
| |---- views - 項(xiàng)目布局相關(guān)文件夾
| |---- App.vue - 頁(yè)面入口文件
| |---- main.js - 程序入口文件炬丸，加載各種公共組件
|-- public - 靜態(tài)文件，比如一些圖片蜒蕾，json數(shù)據(jù)等
| |---- favicon.ico - 圖標(biāo)文件
| |---- index.html - 入口頁(yè)面
|-- .babelrc - ES6語(yǔ)法編譯配置
|-- .editorconfig - 定義代碼格式
|-- .gitignore - git上傳需要忽略的文件格式
|-- .postcsssrc - postcss配置文件
|-- README.md - 項(xiàng)目說明
|-- package.json - 項(xiàng)目基本信息,包依賴信息等
- 搭建項(xiàng)目
- 安裝stylus依賴包（安裝項(xiàng)目時(shí)如已經(jīng)配置稠炬，則不用再安裝）
stylus教程-張?chǎng)涡?鑫空間-鑫生活
npm install stylus stylus-loader --save-dev- 引用公用的stylus文件
- 搭建結(jié)構(gòu)
|-- components - 非路由組件文件夾 |---- FooterGuide - 底部組件文件夾 |---- FooterGuide.vue - 底部組件 |-- views - 項(xiàng)目結(jié)構(gòu)組件文件夾 |---- Msite - 首頁(yè)組件文件夾 |---- Msite.vue - 首頁(yè)組件 |---- Search - 搜索組件文件夾 |---- Search.vue - 搜索組件 |---- Order - 訂單組件文件夾 |---- Order.vue - 訂單組件 |---- Profile - 個(gè)人組件文件夾 |---- Profile.vue -個(gè)人組件- 引入reset文件（公用css）
index.html 中引入 <link rel="stylesheet" href="/static/css/reset.css"> - 移動(dòng)端
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. 解決點(diǎn)擊響應(yīng)延時(shí)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> - 配置路由
- main.js 引入路由
- App.vue 引入各組件
- 執(zhí)行 npm run serve，手動(dòng)切換路由咪啡，查看結(jié)果
- 安裝stylus依賴包（安裝項(xiàng)目時(shí)如已經(jīng)配置稠炬，則不用再安裝）
4. 結(jié)束
查看結(jié)果首启，成功切換，上傳GitHub撤摸，關(guān)閉WebStorm毅桃，準(zhǔn)備睡覺，一氣呵成准夷！
點(diǎn)個(gè)贊唄钥飞！
