vue实战（2）：初始化项目、搭建底部导航路由

按部就班

经过上篇整理，欠缺的知识还挺多，不过没关系，一边学习一边做项目，不耽误事，直接造起来。

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）：开发店铺详情（一）

1. 资源准备

需要准备一些iconfont字体图标
- 在阿里巴巴矢量图库创建账号
- 创建一个项目库
- 找适用的图标加入项目库（尽量找风格一致的图标）
- 下载至本地，备用（不过项目中，使用的是直接引用）
  - 生成在线链接引用

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

2. vue-cli3 初始化项目

命令行详细步骤
vue ui搭建项目详细步骤

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              - 项目基本信息,包依赖信息等

3. 搭建项目
   • 安装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">
     

   • 移动端

     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>
     

   • 配置路由
   • main.js 引入路由
   • App.vue 引入各组件
   • 执行 npm run serve，手动切换路由，查看结果

4. 结束

查看结果，成功切换，上传GitHub，关闭WebStorm，准备睡觉，一气呵成！