做神马网站优化快重庆公众通
这是一个面向移动端的项目，先看看做了这个项目能收获什么，注意这是vue2的项目， 是个经典项目，能为未来学习vue3项目打下基础。
首先来说一下为啥是vue2，因为vue3还没有大范围普及，目前大部分企业还在用vue2的选项式API的写法，vue3的组合式API风格是趋势（虽然我本人更喜欢vue3的语法嘿嘿~~因为更像后端那种风格，但是学了vue2的语法感觉vue2的语法挺简单的）。
- 由于我是第一次写博客，里面文章的样式、格式可能没怎么操弄 ，大家可以指出调整意见，我会第一时间调整的。
创建项目
基于vue-cli脚手架创建项目，输入
vue create hm-shopping如果出现'vue' 不是内部或外部命令，也不是可运行的程序或批处理文件。这个报错，是因为你在nodejs里面缺乏vue.cmd,并且没有配置环境变量。具体解步骤可以把报错结果复制下来到csdn上搜索解决办法，我就不细说了。
接下来选择如下画红框的，
注意：第二个红框按空格相当于选择，选完红框中的四个之后回车即可，其他也是类似
我的最后一个选项有npm是因为我电脑装了npm和pnpm，我选择了npm
出现下面这个页面表示项目创建成功了
然后输入cd hm-shopping,再输入npm run serve去启动，之后在浏览器输入http://localhost:8080/ 如下图启动成功
调整初始化目录
首先先把我画红框的删除，目录解构跟我不一样没关系，就是把components和views下的所有文件删除
之后把router下的index.js删成如图所示
App.vue只留一个路由出口，所有样式也删除掉
然后在src目录下面新建api和utils两个文件夹
两个目录作用如下：
① api接口模块:发送ajax请求的接口模块
② utils 工具模块:自己封装的一些工具方法模块
vant组件库
vant导入
全部导入可查看官方文档:Vant 2 - Mobile UI Components built on Vue
推荐使用按需引入
先安装vant2，后面要加-force，不然会报错
npm i vant@latest-v2 -S -force然后装插件
npm i babel-plugin-import -D -force然后把这段代码复制到bable.config.js这个文件
plugins: [['import', {libraryName: 'vant',libraryDirectory: 'es',style: true}, 'vant']]像这个样
之后在utils下的文件夹新建vant-ui.js,按需导入几个ui测试看看
import Vue from 'vue'
import { Button, Switch } from 'vant'Vue.use(Button).use(Switch)实际上 以上代码本来都是在main.js编写的，但是随着导入的组件越来越多，会造成main,js代码量过大，于是把所有的组件导入和使用写在工具类utils下的vant-ui.js
然后在main.js导入vant-ui.js
import '@/utils/vant-ui'然后在App.vue下中的template中的div里面填入如下代码，之后运行测试看看
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>在浏览器查看，出现组件说明运行成功
不过有可能报如下这个错误，这些都是ESLint代码格式不规范报的错
但是老是这样手动修改太麻烦，可以在vscode里面安装ESLint插件 ，
然后打开左下角的设置图标，选择设置选项，之后点击右上角的红框框
将这个配置代码保存进去即可
//保存的时候自动帮我们修正错误"editor.codeActionsOnSave": {"source.fixAll": true},//保存的时候不自动格式化"editor.formatOnSave": falsepostcss插件实现--vw适配
这个插件的作用是量了多少px就显示多少vw，px/基准值(比如375) * 100 = vw
这个安装插件根据你自己的选择，你是npm就用我的，yarn就按照黑马的步骤来
我放上如下这张图片是在了解为什么要vw适配——毕竟本篇文章是作为我的学习笔记使用的，当然我会考虑到有些地方大家可能会报错，会尽量写的详细些的
- 1.安装插件
-
npm add postcss-px-to-viewport@1.1.1 -D -force - 在根目录新建postcss.config.js文件，填入配置
module.exports = {plugins: {'postcss-px-to-viewport': {viewportWidth: 375}} }
如图所示
路由设计配置
配置一级路由
在视图views里面新建6个文件夹，每个文件夹代表一个模块。其中搜索页和搜索列表都是搜索功能，两个可以合并成一个模块。
layout：首页模块， login：登录模块， myorder：订单管理， pay：结算支付， prodetail：订单详情， search：两个搜索模块。
之后在每个模块文件夹下都新建模块的组合性index.vue文件，在export default里加个属性name配置这个模块的名称，由于ESLint的语法规范，要求名字必须是多个单词组成，并且是大驼峰命名法，所以如图所示，属性name的值每个都是某某Index的格式，比如prodetail中的index.vue里面的name是ProDetailIndex。
例外：search有两个模块，一个搜索列表，一个搜索页。如下图：我们把搜索页的模块放在index.vue里面（左图），搜索列表放在list.vue里面（右图）。
然后在router下面的index.js去配置各个模块的路由，直接复制以下代码到里面
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '@/views/login'
import Layout from '@/views/layout'
import Myorder from '@/views/myorder'
import Pay from '@/views/pay'
import ProDetail from '@/views/prodetail'
import SearchList from '@/views/search/list'
import Search from '@/views/search'Vue.use(VueRouter)
const router = new VueRouter({routes: [{ path: '/login', component: Login },{ path: '/', component: Layout },{ path: '/myorder', component: Myorder },{ path: '/pay', component: Pay },// 动态路由传参，确定是那个商品{ path: '/prodetail/:id', component: ProDetail },{ path: '/search', component: Search },{ path: '/searchlist', component: SearchList }]
})export default router完成底部导航栏
由于二级路由是全部在首页里面的，他底部有个导航栏的，所以先实现底部的导航栏
首先在utils文件夹下的vant-ui.js按需导入。
import { Button, Switch, Tabbar, TabbarItem } from 'vant'Vue.use(Tabbar)
Vue.use(TabbarItem)你就把上面代码复制下来粘贴上去，由于前面配置了自动ESLint修改，按住Ctrl+S保存后，会自动帮我们调整好
之后在首页模块layout文件夹下的index.vue，在template标签里的div标签粘贴如下代码
<van-tabbar active-color="#ee0a24" inactive-color="#000"><van-tabbar-item icon="wap-home-o">首页</van-tabbar-item><van-tabbar-item icon="apps-o">分类页</van-tabbar-item><van-tabbar-item icon="shopping-cart-o">购物车</van-tabbar-item><van-tabbar-item icon="user-o">我的</van-tabbar-item>
</van-tabbar>同时把App.vue里面的画红框的删掉
改成路由视图出口
然后npm run serve运行，vscode会出现这个画面，ctrl+点击打开第一个链接，
之后右键。拉到最底下选择检查，因为这是移动端的项目，首先选择左图的红框，调成移动端；然后选择最右边的三个点选择左右阅读模式
最后左边的效果图底部出现标签栏则成功
配置二级路由
接下来配置二级路由，所有的二级路由都是在首页模块下的，所以在layout文件夹下新建 如下图画红框的四个文件，每个vue文件代表首页基于底部导航栏的不同的四个界面。每个文件呢按照绿框中的格式编写，当你配置过一级路由就知道是啥意思了
之后在配路由的router下的index.js中，将配置首页的路由{ path: '/',component: Layout }改成如下代码
{path: '/',component: Layout,redirect: '/home',children: [{ path: '/home', component: Home },{ path: '/category', component: Category },{ path: '/cart', component: Cart },{ path: '/user', component: User }]},redict是重定向，表明访问’/‘这个路由是默认直接跳转到/home
之后再在上方导入对应模块
import Home from '@/views/layout/home'
import Category from '@/views/layout/category'
import Cart from '@/views/layout/cart'
import User from '@/views/layout/user'然后跳到layout文件夹下的index.vue中，在van-tabbar标签中 添加route表明添加了路由模式，然后在下面每个tabbar-item添加to="/xxx"的导航链接，之后在上方同样的加入二级路由出口<router-view></router-view>。
接下来在浏览器查看看是否成功。
- 在#后面只保留/，回车看是否跳转到/home
- 点击下方其余导航栏部分，观察上方的路由是否改变，空白区域是否变化
没问题那么恭喜你，已经完成所有的路由配置！
加下来会写关于登陆界面的布局以及axios的封装，和登录功能，敬请期待~~~，点个关注点个赞以后不迷路~~~
