智慧商城项目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的封装,和登录功能,敬请期待~~~,点个关注点个赞以后不迷路~~~