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):开发店铺详情(一)
vue实战(11):开发店铺详情(二)
vue实战(12):完结 + 附学习视频

1. 资源准备

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

  -
  -

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              - 项目基本信息,包依赖信息等
  1. 搭建项目
    • 安装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 中引入
      
      
    • 移动端
      1. viewport
      
      2. 解决点击响应延时0.3s问题
      
      
      
    • 配置路由
    • main.js 引入路由
    • App.vue 引入各组件
    • 执行 npm run serve,手动切换路由,查看结果

4. 结束

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

vue实战(2):初始化项目、搭建底部导航路由_第1张图片
点个赞呗!

你可能感兴趣的:(vue实战(2):初始化项目、搭建底部导航路由)