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

搭建项目

安装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，准备睡觉，一气呵成！

点个赞呗！

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

按部就班

0. 其它

1. 资源准备

2. vue-cli3 初始化项目

项目目录

4. 结束

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