智慧商城项目1-项目初始化创建

       这是一个面向移动端的项目，先看看做了这个项目能收获什么，注意这是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": false

postcss插件实现--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的封装，和登录功能，敬请期待~~~，点个关注点个赞以后不迷路~~~