 项目介绍,路由配置,vant组件库的下载和使用)
文章目录零一.项目介绍和配置1.项目介绍和预览2.技术栈或知识点3.创建项目和项目配置二.vant-ui 组件库介绍1.什么是组件库?2.vant的下载版本3.其他常见组件库4.vant中的组件的全部导入和局部导入全部导入(方便但体积大)局部导入(性能高,推荐)5.下载vant的postcss插件安装和配置应用示例三.路由配置1.创建路由文件创建views下的一级路由文件创建嵌套在Layout的二级路由文件2.配置路由四.使用vant库的tabbar组件对二级路由进行页面配置Layout/index.vue把按需引入的代码从main.JS中抽离出来五.重置默认样式新建styles/common.less在main.js中导入零由于后端接口被重定向,导致出现跨域问题,需要更新文件如下:原理:请求不再由浏览器直接发送给后端而是交给本地 node 服务转发,不会出现跨域问题//1.vue.config.js中添加字段:devServer:{proxy:{/api:{target:http://smart-shop.itheima.net,changeOrigin:true,pathRewrite:{^/api:/api}}}}}//2.utils/request.js中把基地址改成相对路径// baseURL: http://smart-shop.itheima.net/index.php?s/api,baseURL:/api,一.项目介绍和配置1.项目介绍和预览这个vue2项目具有完整的商品购物流程,购物类项目是必须掌握的项目,建议多敲几次项目预览:http://smart-shop.itheima.net/#/项目代码:https://gitee.com/yjh8866/wisdom-shop项目后台接口和静态资源:https://apifox.com/apidoc/shared/dead项目基础地址(baseURL):https://smart-shop.itheima.net/index.php?s/api视频讲解:https://www.bilibili.com/video/BV1HV4y1a7n42.技术栈或知识点完整的电商购物业务流程vant组件库的使用适配移动端的VMrequest请求方法的封装storage存储模块的封装api请求模块的封装请求拦截器和响应拦截器的设置嵌套路由的配置路由导航守卫路由跳转传参Vuex分模块管理数据项目打包和项目优化3.创建项目和项目配置本项目是基于VueCli自定义创建脚手架vue create my-shopping步骤:安装脚手架创建项目选择自定义Bable:选择语法降级Router:vue-routerVuex:状态管理CSS:预处理器Linter:代码规范vue版本:Vue2.x VueRouter hash模式CSS预处理器:lessESLint:StandardLint on Save配置文件:dedicated config files,而不是堆在package.json里调整src目录下的子目录变成:api,assets,components,router,utils,view,其中,api是存放发送ajax请求接口的方法的模块,utils是工具模块,封装一些工具类方法二.vant-ui 组件库介绍1.什么是组件库?第三方封装好了很多组件,整合到一起就是一个组件库常见场景:日期选择框,数字输入框,五星评价,用户密码输入框2.vant的下载版本vue2项目对应vant2,下载命令:npm i vantlatest-v2 -S踩坑:遇到到了版本冲突报错如下:npm i vantlatest-v2 npmERR!codeERESOLVEnpmERR!ERESOLVEcould not resolve npmERR!npmERR!While resolving:vue/eslint-config-standard6.1.0原因:项目中的 vue/eslint-config-standard6.1.0要求 eslint-plugin-vue 版本为^7.0.0但当前安装了更高版本的 eslint-plugin-vue8.7.1。 降级 eslint-plugin-vue解决方法:1.降级:npm install eslint-plugin-vue7.0.0说明此操作将 eslint-plugin-vue 降级到与 vue/eslint-config-standard6.1.0兼容的版本12。2.重新安装vant:npm install vantlatest-v2vue3项目对应vant3和vant43.其他常见组件库PC:element-ui(饿了么),ant-design-vue(阿里)移动端:vant-ui(重点:更新频率高,迭代勤)mintUI(饿了么)cubeUI(滴滴)*注:跟vant-ui一样,element-ui对应vue2,而element-plus对应vue34.vant中的组件的全部导入和局部导入全部导入(方便但体积大)步骤:安装组件库npm i vantlatest-v2 -S在main.js中注册:import Vant from vant;Vue.use(Vant)在页面中使用:van-button typeprimary主要按钮/van-button局部导入(性能高,推荐)步骤:安装组件库:命令同上安装插件:npm i babel-plugin-import -Dbabel.config.js中进行配置:module.exports{presets:[vue/cli-plugin-babel/preset],plugins:[[import,{libraryName:vant,libraryDirectory:es,style:true},vant// 插件命名空间标识Babel7必须添加]]}踩坑:一定要把vue项目从根目录拉到vscode中,添加到工作区,否则babel设置不成功main.js中按需导入注册:import{Button} from Vant;Vue.use(Button)在页面中使用:代码同上5.下载vant的postcss插件目的是实现项目中VM的自动适配安装和配置安装命令:npm install postcss-px-to-viewport1.1.1 -D在根目录下新建postcss.config.js文件并配置module.export{plugins:{postcss-px-to-viewport:{viewportWidth:375//标准屏宽度}}}应用示例//html!--使用postcss:--divclassbox/div//css.box{width:150px;height:150px;background:pink;}把浏览器尺寸从iphoneSE切换到其他宽度:box会自动根据原始宽高px占据375px的比例自动缩放:150px/375px40vm/100vm三.路由配置1.创建路由文件项目分为6个一级路由和4个二级路由创建views下的一级路由文件首页(架子):Layout/index.vue登录页:Login/index.vue商品详情页:ProductDetail/index.vue结算页:Pay/index.vue搜索页:Search/index.vue,搜索列表页:Search/list.vue我的订单:MyOrder/index.vue项目根目录下使用CMD快速创建:step1:创建views下的一级路由目录# 创建Layout组件 mkdir-p src/views/Layout # 创建Login组件 mkdir-p src/views/Login # 创建ProductDetail组件 mkdir-p src/views/ProductDetail # 创建Pay组件 mkdir-p src/views/Pay # 创建Search组件注意Search目录下有两个文件index.vue和list.vue mkdir-p src/views/Search # 创建MyOrder组件 mkdir-p src/views/MyOrderstep2:创建各大目录下的index.vue文件# 定义所有视图目录包含 Search $views(Layout,Login,ProductDetail,Pay,Search,MyOrder)foreach($viewin$views){# 确保目录存在-Force 会自动创建不存在的目录 $dirPathsrc/views/$viewNew-Item-Path $dirPath-ItemType Directory-Force # 为每个目录创建 index.vue $indexFile$dirPath/index.vueNew-Item-Path $indexFile-ItemType File-Force}# 额外创建 Search/list.vueSearch 目录已存在 New-Item-Pathsrc/views/Search/list.vue-ItemType File-Force创建嵌套在Layout的二级路由文件首页:/Layout/home.vue分类页:/Layout/category.vue购物车:/Layout/cart.vue我的:/Layout/user.vue项目根目录下使用CMD快速创建:# 创建Layout目录和组件文件 $layoutDirsrc/views/LayoutNew-Item-Path $layoutDir-ItemType Directory-Force # 创建直接放在Layout目录下的二级路由组件 $components(home,category,cart,user)foreach($compin$components){New-Item-Path$layoutDir/$comp.vue-ItemType File-Force}2.配置路由//router/index.jsimportVuefromvueimportVueRouterfromvue-routerimportLayoutfrom../views/Layout/index.vueimportcartPagefrom/views/Layout/cart.vueimportcategoryPagefrom/views/Layout/category.vueimporthomePagefrom/views/Layout/home.vueimportuserPagefrom/views/Layout/user.vueimportSearchfrom/views/Search/index.vueimportListfrom/views/Search/list.vueimportLoginfrom/views/Login/index.vueimportProductDetailfrom/views/ProductDetail/index.vueimportPayfrom/views/Pay/index.vueimportMyOrderfrom/views/MyOrder/index.vueVue.use(VueRouter)constroutes[{path:/,name:home,redirect:/home,component:Layout,children:[{path:cart,component:cartPage},{path:category,component:categoryPage},{path:home,component:homePage},{path:user,component:userPage}]},{path:/layout,redirect:/home},{path:/search,component:Search},{path:/list,component:List},{path:/login,component:Login},{path:/productdetail,component:ProductDetail},{path:/pay,component:Pay},{path:/myorder,component:MyOrder}]constrouternewVueRouter({mode:history,base:process.env.BASE_URL,routes})exportdefaultrouter四.使用vant库的tabbar组件对二级路由进行页面配置Layout/index.vue//htmldivclasswrapperrouter-view/router-view!-- vant组件:tabbar --van-tabbarroutev-modelactiveactive-color#ee0a24inactive-color#000van-tabbar-itemiconhome-oto/home首页/van-tabbar-itemvan-tabbar-itemiconapps-oto/category分类页/van-tabbar-itemvan-tabbar-itemiconshopping-cart-oto/cart购物车/van-tabbar-itemvan-tabbar-itemiconuser-oto/user我的/van-tabbar-item/van-tabbar/div//js data () { return { active: } }*注:vant各个组件的用法可在其官网上搜到,特别是各个属性的作用和相应的属性值,都有介绍,后面不再赘述把按需引入的代码从main.JS中抽离出来随着项目的进行,在main.js中对vant中的组件按需引入会导致其越来越臃肿,因此提前将按需引入的代码从中单独分装在单独文件中很有必要新建utils/vant-ui.jsimportVuefromvueimport{Tabbar,TabbarItem,Button,NavBar}fromvantVue.use(Tabbar)Vue.use(TabbarItem)Vue.use(Button)Vue.use(NavBar)在main.js中引入import/utils/vant-ui五.重置默认样式新建styles/common.less*{margin:0;padding:0;box-sizing:border-box;}//文字溢出省略号 .text-allipsis-2{overflow:hidden;-webkit-line-clamp:2;text-overflow:allipsis;diaplay:-webkit-box;-webkit-box-orient:vertical;}在main.js中导入import/styles/common.less Vue2项目之移动端购物商城(一) 项目介绍,路由配置,vant组件库的下载和使用
文章目录零一.项目介绍和配置1.项目介绍和预览2.技术栈或知识点3.创建项目和项目配置二.vant-ui 组件库介绍1.什么是组件库?2.vant的下载版本3.其他常见组件库4.vant中的组件的全部导入和局部导入全部导入(方便但体积大)局部导入(性能高,推荐)5.下载vant的postcss插件安装和配置应用示例三.路由配置1.创建路由文件创建views下的一级路由文件创建嵌套在Layout的二级路由文件2.配置路由四.使用vant库的tabbar组件对二级路由进行页面配置Layout/index.vue把按需引入的代码从main.JS中抽离出来五.重置默认样式新建styles/common.less在main.js中导入零由于后端接口被重定向,导致出现跨域问题,需要更新文件如下:原理:请求不再由浏览器直接发送给后端而是交给本地 node 服务转发,不会出现跨域问题//1.vue.config.js中添加字段:devServer:{proxy:{/api:{target:http://smart-shop.itheima.net,changeOrigin:true,pathRewrite:{^/api:/api}}}}}//2.utils/request.js中把基地址改成相对路径// baseURL: http://smart-shop.itheima.net/index.php?s/api,baseURL:/api,一.项目介绍和配置1.项目介绍和预览这个vue2项目具有完整的商品购物流程,购物类项目是必须掌握的项目,建议多敲几次项目预览:http://smart-shop.itheima.net/#/项目代码:https://gitee.com/yjh8866/wisdom-shop项目后台接口和静态资源:https://apifox.com/apidoc/shared/dead项目基础地址(baseURL):https://smart-shop.itheima.net/index.php?s/api视频讲解:https://www.bilibili.com/video/BV1HV4y1a7n42.技术栈或知识点完整的电商购物业务流程vant组件库的使用适配移动端的VMrequest请求方法的封装storage存储模块的封装api请求模块的封装请求拦截器和响应拦截器的设置嵌套路由的配置路由导航守卫路由跳转传参Vuex分模块管理数据项目打包和项目优化3.创建项目和项目配置本项目是基于VueCli自定义创建脚手架vue create my-shopping步骤:安装脚手架创建项目选择自定义Bable:选择语法降级Router:vue-routerVuex:状态管理CSS:预处理器Linter:代码规范vue版本:Vue2.x VueRouter hash模式CSS预处理器:lessESLint:StandardLint on Save配置文件:dedicated config files,而不是堆在package.json里调整src目录下的子目录变成:api,assets,components,router,utils,view,其中,api是存放发送ajax请求接口的方法的模块,utils是工具模块,封装一些工具类方法二.vant-ui 组件库介绍1.什么是组件库?第三方封装好了很多组件,整合到一起就是一个组件库常见场景:日期选择框,数字输入框,五星评价,用户密码输入框2.vant的下载版本vue2项目对应vant2,下载命令:npm i vantlatest-v2 -S踩坑:遇到到了版本冲突报错如下:npm i vantlatest-v2 npmERR!codeERESOLVEnpmERR!ERESOLVEcould not resolve npmERR!npmERR!While resolving:vue/eslint-config-standard6.1.0原因:项目中的 vue/eslint-config-standard6.1.0要求 eslint-plugin-vue 版本为^7.0.0但当前安装了更高版本的 eslint-plugin-vue8.7.1。 降级 eslint-plugin-vue解决方法:1.降级:npm install eslint-plugin-vue7.0.0说明此操作将 eslint-plugin-vue 降级到与 vue/eslint-config-standard6.1.0兼容的版本12。2.重新安装vant:npm install vantlatest-v2vue3项目对应vant3和vant43.其他常见组件库PC:element-ui(饿了么),ant-design-vue(阿里)移动端:vant-ui(重点:更新频率高,迭代勤)mintUI(饿了么)cubeUI(滴滴)*注:跟vant-ui一样,element-ui对应vue2,而element-plus对应vue34.vant中的组件的全部导入和局部导入全部导入(方便但体积大)步骤:安装组件库npm i vantlatest-v2 -S在main.js中注册:import Vant from vant;Vue.use(Vant)在页面中使用:van-button typeprimary主要按钮/van-button局部导入(性能高,推荐)步骤:安装组件库:命令同上安装插件:npm i babel-plugin-import -Dbabel.config.js中进行配置:module.exports{presets:[vue/cli-plugin-babel/preset],plugins:[[import,{libraryName:vant,libraryDirectory:es,style:true},vant// 插件命名空间标识Babel7必须添加]]}踩坑:一定要把vue项目从根目录拉到vscode中,添加到工作区,否则babel设置不成功main.js中按需导入注册:import{Button} from Vant;Vue.use(Button)在页面中使用:代码同上5.下载vant的postcss插件目的是实现项目中VM的自动适配安装和配置安装命令:npm install postcss-px-to-viewport1.1.1 -D在根目录下新建postcss.config.js文件并配置module.export{plugins:{postcss-px-to-viewport:{viewportWidth:375//标准屏宽度}}}应用示例//html!--使用postcss:--divclassbox/div//css.box{width:150px;height:150px;background:pink;}把浏览器尺寸从iphoneSE切换到其他宽度:box会自动根据原始宽高px占据375px的比例自动缩放:150px/375px40vm/100vm三.路由配置1.创建路由文件项目分为6个一级路由和4个二级路由创建views下的一级路由文件首页(架子):Layout/index.vue登录页:Login/index.vue商品详情页:ProductDetail/index.vue结算页:Pay/index.vue搜索页:Search/index.vue,搜索列表页:Search/list.vue我的订单:MyOrder/index.vue项目根目录下使用CMD快速创建:step1:创建views下的一级路由目录# 创建Layout组件 mkdir-p src/views/Layout # 创建Login组件 mkdir-p src/views/Login # 创建ProductDetail组件 mkdir-p src/views/ProductDetail # 创建Pay组件 mkdir-p src/views/Pay # 创建Search组件注意Search目录下有两个文件index.vue和list.vue mkdir-p src/views/Search # 创建MyOrder组件 mkdir-p src/views/MyOrderstep2:创建各大目录下的index.vue文件# 定义所有视图目录包含 Search $views(Layout,Login,ProductDetail,Pay,Search,MyOrder)foreach($viewin$views){# 确保目录存在-Force 会自动创建不存在的目录 $dirPathsrc/views/$viewNew-Item-Path $dirPath-ItemType Directory-Force # 为每个目录创建 index.vue $indexFile$dirPath/index.vueNew-Item-Path $indexFile-ItemType File-Force}# 额外创建 Search/list.vueSearch 目录已存在 New-Item-Pathsrc/views/Search/list.vue-ItemType File-Force创建嵌套在Layout的二级路由文件首页:/Layout/home.vue分类页:/Layout/category.vue购物车:/Layout/cart.vue我的:/Layout/user.vue项目根目录下使用CMD快速创建:# 创建Layout目录和组件文件 $layoutDirsrc/views/LayoutNew-Item-Path $layoutDir-ItemType Directory-Force # 创建直接放在Layout目录下的二级路由组件 $components(home,category,cart,user)foreach($compin$components){New-Item-Path$layoutDir/$comp.vue-ItemType File-Force}2.配置路由//router/index.jsimportVuefromvueimportVueRouterfromvue-routerimportLayoutfrom../views/Layout/index.vueimportcartPagefrom/views/Layout/cart.vueimportcategoryPagefrom/views/Layout/category.vueimporthomePagefrom/views/Layout/home.vueimportuserPagefrom/views/Layout/user.vueimportSearchfrom/views/Search/index.vueimportListfrom/views/Search/list.vueimportLoginfrom/views/Login/index.vueimportProductDetailfrom/views/ProductDetail/index.vueimportPayfrom/views/Pay/index.vueimportMyOrderfrom/views/MyOrder/index.vueVue.use(VueRouter)constroutes[{path:/,name:home,redirect:/home,component:Layout,children:[{path:cart,component:cartPage},{path:category,component:categoryPage},{path:home,component:homePage},{path:user,component:userPage}]},{path:/layout,redirect:/home},{path:/search,component:Search},{path:/list,component:List},{path:/login,component:Login},{path:/productdetail,component:ProductDetail},{path:/pay,component:Pay},{path:/myorder,component:MyOrder}]constrouternewVueRouter({mode:history,base:process.env.BASE_URL,routes})exportdefaultrouter四.使用vant库的tabbar组件对二级路由进行页面配置Layout/index.vue//htmldivclasswrapperrouter-view/router-view!-- vant组件:tabbar --van-tabbarroutev-modelactiveactive-color#ee0a24inactive-color#000van-tabbar-itemiconhome-oto/home首页/van-tabbar-itemvan-tabbar-itemiconapps-oto/category分类页/van-tabbar-itemvan-tabbar-itemiconshopping-cart-oto/cart购物车/van-tabbar-itemvan-tabbar-itemiconuser-oto/user我的/van-tabbar-item/van-tabbar/div//js data () { return { active: } }*注:vant各个组件的用法可在其官网上搜到,特别是各个属性的作用和相应的属性值,都有介绍,后面不再赘述把按需引入的代码从main.JS中抽离出来随着项目的进行,在main.js中对vant中的组件按需引入会导致其越来越臃肿,因此提前将按需引入的代码从中单独分装在单独文件中很有必要新建utils/vant-ui.jsimportVuefromvueimport{Tabbar,TabbarItem,Button,NavBar}fromvantVue.use(Tabbar)Vue.use(TabbarItem)Vue.use(Button)Vue.use(NavBar)在main.js中引入import/utils/vant-ui五.重置默认样式新建styles/common.less*{margin:0;padding:0;box-sizing:border-box;}//文字溢出省略号 .text-allipsis-2{overflow:hidden;-webkit-line-clamp:2;text-overflow:allipsis;diaplay:-webkit-box;-webkit-box-orient:vertical;}在main.js中导入import/styles/common.less