开源网站模板,高要市建设局网站,大理 网站建设,百度网站优化 件这是一个面向移动端的项目#xff0c;先看看做了这个项目能收获什么#xff0c;注意这是vue2的项目#xff0c; 是个经典项目#xff0c;能为未来学习vue3项目打下基础。 首先来说一下为啥是vue2#xff0c;因为vue3还没有大范围普及#xff0c;目前大部分企业还在用vue2… 这是一个面向移动端的项目先看看做了这个项目能收获什么注意这是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 vantlatest-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 vantVue.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 typeprimary主要按钮/van-button
van-button typeinfo信息按钮/van-button
van-button typedefault默认按钮/van-button
在浏览器查看出现组件说明运行成功 不过有可能报如下这个错误这些都是ESLint代码格式不规范报的错 但是老是这样手动修改太麻烦可以在vscode里面安装ESLint插件 然后打开左下角的设置图标选择设置选项之后点击右上角的红框框
将这个配置代码保存进去即可
//保存的时候自动帮我们修正错误editor.codeActionsOnSave: {source.fixAll: true},//保存的时候不自动格式化editor.formatOnSave: false
postcss插件实现--vw适配
这个插件的作用是量了多少px就显示多少vwpx/基准值(比如375) * 100 vw
这个安装插件根据你自己的选择你是npm就用我的yarn就按照黑马的步骤来 我放上如下这张图片是在了解为什么要vw适配——毕竟本篇文章是作为我的学习笔记使用的当然我会考虑到有些地方大家可能会报错会尽量写的详细些的 1.安装插件 npm add postcss-px-to-viewport1.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/searchVue.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 vantVue.use(Tabbar)
Vue.use(TabbarItem)
你就把上面代码复制下来粘贴上去由于前面配置了自动ESLint修改按住CtrlS保存后会自动帮我们调整好
之后在首页模块layout文件夹下的index.vue在template标签里的div标签粘贴如下代码
van-tabbar active-color#ee0a24 inactive-color#000van-tabbar-item iconwap-home-o首页/van-tabbar-itemvan-tabbar-item iconapps-o分类页/van-tabbar-itemvan-tabbar-item iconshopping-cart-o购物车/van-tabbar-itemvan-tabbar-item iconuser-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的封装和登录功能敬请期待~~~点个关注点个赞以后不迷路~~~
