餐饮网站制作,美术学院网站建设,济南市莱芜区都市网,模板之家htmlVue从0基础到大神学习完整教程完整教程#xff08;附代码资料#xff09;主要内容讲述#xff1a;vue基本概念#xff0c;vue-cli的使用#xff0c;vue的插值表达式#xff0c;{{ gaga }}#xff0c;{{ if (obj.age 18 ) { } }}#xff0c;vue指令#xff0c;综合…
Vue从0基础到大神学习完整教程完整教程附代码资料主要内容讲述vue基本概念vue-cli的使用vue的插值表达式{{ gaga }}{{ if (obj.age 18 ) { } }}vue指令综合案例 - 文章标题编辑vue介绍,开发vue的方式,基本使用,如何覆盖webpack配置,目录分析与清理,vue单文件组件的说明,vue通过data提供数据,通过插值表达式显示数据,安装vue开发者工具,v-bind指令,v-on指令,v-if 和 v-show,v-model,v-text 和 v-html。day-08vuex介绍,语法,模块化,小结。面经PC端-element (上)初始化,request,router,login模块,layout模块,dashboard模块了解。面经PC端 - Element (下)Article / list 列表,Article / add 添加,Article / del 删除,Article / upd 修改,Article / preview 预览,yarn-补充。vue指令下成绩案例计算属性属性监听v-for,样式处理,基本结构与样式,基本渲染,删除,新增,处理日期格式,基本使用,计算属性的缓存的问题,成绩案例-计算属性处理总分 和 平均分,计算属性的完整写法,大小选,基本使用,复杂类型的监听-监听的完整写法,成绩案例-监听数据进行缓存,配置步骤 两步,使用演示。vue指令下成绩案例计算属性属性监听v-for,样式处理,基本结构与样式,基本渲染,删除,新增,处理日期格式,基本使用,计算属性的缓存的问题,成绩案例-计算属性处理总分 和 平均分,计算属性的完整写法,大小选,基本使用,复杂类型的监听-监听的完整写法,成绩案例-监听数据进行缓存,配置步骤 两步,使用演示。组件化开发组件通信todo案例作业什么是组件化开发,组件的注册,全局注册组件,组件的样式冲突 ,组件通信 - 父传子 props 传值,v-for 遍历展示组件练习,单向数据流,组件通信 - 子传父,props 校验,布局,任务组件todo,列表,删除,修改不做了下面代码其实就是我想让大家练习,添加,剩余数量,清空已完成,小选与大选,筛选作业,本地存储,附加练习_1.喜欢小狗狗吗,附加练习_2.点击文字变色,附加练习_3. 循环展示狗狗,附加练习_4.选择喜欢的狗。v-modelref 和 refs，nextTickdynamic 动态组件自定义指令插槽案例商品列表v-model 语法糖,v-model给组件使用,动态组件的基本使用,自定义指令说明,自定义指令 - 局部注册,自定义指令 - 全局注册,自定义指令 - 指令的值,默认插槽 slot,后备内容 (默认值),具名插槽,作用域插槽,案例概览,静态结构,MyTag 组件,MyTable 组件。生命周期单页应用程序与路由vue-router研究生命周期的意义,生命周期函数(钩子函数),组件生命周期分类,SPA - 单页应用程序,路由介绍,vue-router介绍,vue-router使用,配置路由规则,路由的封装,vue路由 - 声明式a标签转跳导航,vue路由 - 重定向和模式,vue路由 - 编程式JS代码进行转跳导航,综合练习 - 面经基础版,组件缓存 keep-alive。面经 H5 端 - Vant上初始化,vant,axios封装,router,主题定制-了解,登录注册。面经 H5 端 - Vant下列表,详情,收藏 与 喜欢,我的个人中心。Day01_vuex今日学习目标(边讲边练),1.vuex介绍,2.vuex学习内容,3.vuex例子准备,vuex-store准备,5.vuex-state数据源,【vuex-mutations定义-同步修改,【vuex-mutations使用,8.vuex-actions定义-异步修改,9.vuex-actions使用,10.vuex-重构购物车-准备Store,11.vuex-重构购物车-配置项(上午结束),vuex-getters定义-计算属性,13.vuex-getters使用,14.vuex-modules定义-分模块,15.分模块-影响state取值方式,16.分模块-命名空间,扩展: 使用Devtools调试vuex数据。
全套笔记资料代码移步 前往gitee仓库查看
感兴趣的小伙伴可以自取哦欢迎大家点赞转发~ 面经 H5 端 - Vant上
接口文档地址
初始化
新建项目
创建项目
vue create hm-vant-h5选项
Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)Default ([Vue 3] babel, eslint)Default ([Vue 2] babel, eslint)Manually select features 选自定义手动选择功能 选择vue的版本 3.x2.x是否使用history模式 选择css预处理 选择eslint的风格 选择校验的时机 直接回车 选择配置文件的生成方式 直接回车 是否保存预设下次直接使用 不保存输入 N 等待安装项目初始化完成 启动项目
npm run serveESlint
代码规范一套写代码的约定规则。例如赋值符号的左右是否需要空格一句结束是否是要加;... 没有规矩不成方圆 ESLint:是一个代码检查工具用来检查你的代码是否符合指定的规则(你和你的团队可以自行约定一套规则)。在创建项目时我们使用的是 [JavaScript Standard Style]( 代码风格的规则。
规范说明
建议把 看一遍然后在写的时候, 遇到错误就查询解决。
下面是这份规则中的一小部分
字符串使用单引号 – 需要转义的地方除外无分号 – [这](关键字后加空格 if (condition) { ... }函数名后加空格 function name (arg) { ... }坚持使用全等 摒弃 一但在需要检查 null || undefined 时可以使用 obj null......
示范错误
如果你的代码不符合standard的要求eslint会跳出来刀子嘴豆腐心地提示你。
下面我们在main.js中随意做一些改动添加一些空行空格。
import Vue from vue
import App from ./App.vueimport ./styles/index.less
import router from ./router
Vue.config.productionTip falsenew Vue ( {render: h h(App),router
}).$mount(#app)按下保存代码之后
你将会看在控制台中输出如下错误 eslint 是来帮助你的。心态要好有错就改。 修改
手动修正
根据错误提示来一项一项手动修正。
如果你不认识命令行中的语法报错是什么意思你可以根据错误代码func-call-spacing, space-in-parens,.....去 ESLint 规则列表中查找其具体含义。
打开 [ESLint 规则表]( F这个代码查找对该规则的一个释义。 通过vscode中的eslint插件来实现自动修正 eslint会自动高亮错误显示通过配置eslint会自动帮助我们修复错误 如何安装 如何配置 加vsc编辑器
// 当保存的时候eslint自动帮我们修复错误
editor.codeActionsOnSave: {source.fixAll: true
},
// 保存代码不自动格式化
editor.formatOnSave: false注意eslint的配置文件必须在根目录下这个插件才能才能生效。打开项目必须以根目录打开一次打开一个项目**使用了eslint校验之后把vscode带的那些格式化工具全禁用了 ****Beatify **Prettier - Code formatter
我的完整配置供参考
{editor.tabSize: 2,workbench.iconTheme: vscode-icons,explorer.compactFolders: false,security.workspace.trust.untrustedFiles: open,git.enableSmartCommit: true,// 不要有分号prettier.semi: false,// 使用单引号prettier.singleQuote: true,// 默认使用prittier作为格式化工具editor.defaultFormatter: esbenp.prettier-vscode,emmet.showAbbreviationSuggestions: true,emmet.includeLanguages: {javascript: javascriptreact},editor.suggest.snippetsPreventQuickSuggestions: false,editor.fontSize: 16, // 设置文字的大小window.zoomLevel: 1,emmet.triggerExpansionOnTab: true,// 保存时自动格式化 - 按照eslint的规则格式化editor.codeActionsOnSave: {source.fixAll: true},// 保存代码不自动格式化editor.formatOnSave: false
}目录结构 强烈建议大家严格按照老师的步骤进行调整为了符合企业规范 为了更好的实现后面的操作我们把整体的目录结构做一些调整。
目标:
删除初始化的一些默认文件修改没删除的文件新增我们需要的目录结构
index.html
public/index.html 修改视口开发的是移动端项目
metanameviewportcontentwidthdevice-width,initial-scale1.0, user-scalable0
/main.js 不需要修改
router/index.js
删除默认的路由配置
import Vue from vue
import VueRouter from vue-routerVue.use(VueRouter)const routes [
]const router new VueRouter({routes
})export default routerApp.vue 样式删除
templatediv idapprouter-view//div
/template删除文件
src/views/AboutView.vuesrc/views/HomeView.vuesrc/components/HelloWorld.vuesrc/assets/logo.png
新增目录
src/api 目录存储接口模块 (发送ajax请求接口的模块)src/utils 目录 存储一些工具模块 (自己封装的方法) src/assets 目录 新增项目使用的素材
目录效果如下: vant 组件库第三方封装好了很多很多的组件整合到一起就是一个组件库。 组件库并不是唯一的
pc: element-ui iview ant-design
移动vant-ui
安装vant-ui
npm i vantlatest-v2npm i vantlatest-v2 -S --legacy-peer-deps全部导入-了解 在main.js中
import Vant from vant;
import vant/lib/index.css;
// 把vant中所有的组件都导入了
Vue.use(Vant)即可使用
van-button typeprimary主要按钮/van-button
van-button typeinfo信息按钮/van-buttonvant-ui提供了很多的组件全部导入会导致项目打包变得很大。
按需加载
安装一个插件
npm i babel-plugin-import -Dnpm i babel-plugin-import --force在babel.config.js中配置
module.exports {presets: [vue/cli-plugin-babel/preset],plugins: [[import, {libraryName: vant,libraryDirectory: es,style: true}, vant]]
}按需加载在main.js
import { Button, Icon } from vantVue.use(Button)
Vue.use(Icon)单独配置
main.js引入后期组件会越来越多提取到 utils/vant.js中
import Vue from vue
import { Button, Icon } from vant
Vue.use(Button)
Vue.use(Icon)main.js中引入
import /utils/vantapp.vue中进行测试
van-button typeprimary主要按钮/van-button
van-button typeinfo信息按钮/van-button
van-button typedefault默认按钮/van-button
van-button typewarning警告按钮/van-button
van-button typedanger危险按钮/van-button后续我们用到的所有的组件
import Vue from vue
import {Button, Icon, Tabbar, TabbarItem,NavBar,Form,Field,Toast,Cell,List,Grid,GridItem,CellGroup
} from vantVue.use(Button)
Vue.use(Icon)
Vue.use(Tabbar)
Vue.use(TabbarItem)
Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Toast)
Vue.use(Cell)
Vue.use(List)Vue.use(Grid)
Vue.use(GridItem)
Vue.use(CellGroup)等比适配【重要】
官方说明
npm i postcss-px-to-viewport1.1.1 -D --force项目根目录 新建postcss的配置文件postcss.config.js
// postcss.config.js
module.exports {plugins: {postcss-px-to-viewport: {viewportWidth: 375,},},
};// 重新启动项目如何写页面的样式比如 375屏幕下写200px大小的盒子直接写就可以webpack装的这个包会自动帮我们转换为vw vh单位
axios封装
接口文档地址
我们会使用 axios 来请求后端接口, 一般都会对 axios 进行一些配置 (比如: 配置基础地址等)
一般项目开发中, 都会对 axios 进行基本的二次封装, 单独封装到一个模块中, 便于使用
安装 axios
npm i axios -S新建 utils/request.js 封装 axios 模块
利用 axios.create 创建一个自定义的 axios 来使用
/* 封装axios用于发送请求 */
import axios from axios// 创建一个新的axios实例
const request axios.create({baseURL: timeout: 5000 // 超时5000ms
})// 添加请求拦截器
request.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config
}, function (error) {// 对请求错误做些什么return Promise.reject(error)
})// 添加响应拦截器
request.interceptors.response.use(function (response) {// 对响应数据做点什么return response.data
}, function (error) {// 对响应错误做点什么return Promise.reject(error)
})export default request测试 (可以先注册后登录)
script
export default {async created () {// const res await request.post(/user/register, {// username: shuaipeng,// password: 123456// })const res await request.post(/user/login, {username: shuaipeng,password: 123456})console.log(res)}
}
/scriptrouter
但凡是单个页面独立展示的都是一级路由
路由设计基于昨天面试经验
登录页 一级 Login注册页一级 Register文章详情页一级 Detail首页一级 Layout面经二级Article收藏二级Collect喜欢二级Like我的二级My
一级
router/index.js配置一级路由, 一级views组件于教学资料中直接 CV 即可
import Vue from vue
import VueRouter from vue-routerimport Login from /views/Login
import Register from /views/Register
import Detail from /views/Detail
import Layout from /views/Layout
Vue.use(VueRouter)const router new VueRouter({routes: [{ path: /login, component: Login },{ path: /register, component: Register },{ path: /article/:id, component: Detail },{path: /,component: Layout}]
})export default router清理 App.vue
templatediv idapprouter-view//div
/templatescript
export default {async created () {}
}
/script底部 tabbar 标签页 utils/vant.js 引入组件
import { Button, Icon, Tabbar, TabbarItem } from vant
Vue.use(Tabbar)
Vue.use(TabbarItem)Layout.vue
templatediv classlayout-page首页架子 - 内容区域van-tabbarvan-tabbar-item iconnotes-o面经/van-tabbar-itemvan-tabbar-item iconstar-o收藏/van-tabbar-itemvan-tabbar-item iconlike-o喜欢/van-tabbar-itemvan-tabbar-item iconuser-o我的/van-tabbar-item/van-tabbar/div
/template二级
router/index.js配置二级路由, 二级路由views组件于教学资料中直接 CV 即可
import Vue from vue
import VueRouter from vue-router
import Login from /views/Login
import Register from /views/Register
import Detail from /views/Detail
import Layout from /views/Layoutimport Like from /views/Layout/Like
import Article from /views/Layout/Article
import Collect from /views/Layout/Collect
import User from /views/Layout/UserVue.use(VueRouter)const router new VueRouter({routes: [{ path: /login, component: Login },{ path: /register, component: Register },{ path: /article/:id, component: Detail },{path: /,component: Layout,children: [{ path: /, redirect: /article },{ path: /article, component: Article },{ path: /like, component: Like },{ path: /collect, component: Collect },{ path: /user, component: User }]}]
})export default routerlayout.vue 配置路由出口, 配置 tabbar
templatediv classlayout-pagerouter-view/router-viewvan-tabbar routevan-tabbar-item to/article iconnotes-o面经/van-tabbar-itemvan-tabbar-item to/collect iconstar-o收藏/van-tabbar-itemvan-tabbar-item to/like iconlike-o喜欢/van-tabbar-itemvan-tabbar-item to/user iconuser-o我的/van-tabbar-item/van-tabbar/div
/templatestyle langless scoped
.layout-page {.van-tabbar-item--active {color: #FA6D1D;}
}
/style效果图 主题定制-了解
整体网站风格其实都是橙色的可以通过变量覆盖的方式制定主题色
babel.config.js 制定样式路径
module.exports {presets: [vue/cli-plugin-babel/preset],plugins: [[import, {libraryName: vant,libraryDirectory: es,// 指定样式路径style: (name) ${name}/style/less}, vant]]
}vue.config.js 覆盖变量
const { defineConfig } require(vue/cli-service)
module.exports defineConfig({transpileDependencies: true,css: {loaderOptions: {less: {lessOptions: {modifyVars: {// 直接覆盖变量blue: #FA6D1D,},},},},},
})登录注册
login布局 使用组件
van-nav-barvan-formvan-fieldvan-button
vant-ui.js 注册
import Vue from vue
import {NavBar,Form,Field
} from vant
Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)Login.vue 使用
templatediv classlogin-pagevan-nav-bar title面经登录 /van-form submitonSubmitvan-fieldv-modelusernamenameusernamelabel用户名placeholder用户名:rules[{ required: true, message: 请填写用户名 }]/van-fieldv-modelpasswordtypepasswordnamepasswordlabel密码placeholder密码:rules[{ required: true, message: 请填写密码 }]/div stylemargin: 16pxvan-button block typeinfo native-typesubmit提交/van-button/div/van-form/div
/templatescript
export default {name: login-page,data () {return {username: zhousg,password: 123456}},methods: {onSubmit (values) {console.log(submit, values)}}
}
/scriptLogin.vue添加 router-link 标签跳转到注册
templatediv classlogin-pagevan-nav-bar title面经登录 /van-form submitonSubmit.../van-formrouter-link classlink to/register注册账号/router-link/div
/templateLogin.vue调整样式
style langless scoped
.link {color: #069;font-size: 12px;padding-right: 20px;float: right;
}
/styleregister布局
register.vue
templatediv classlogin-pagevan-nav-bar title面经注册 /van-form submitonSubmitvan-fieldv-modelusernamenameusernamelabel用户名placeholder用户名:rules[{ required: true, message: 请填写用户名 }]/van-fieldv-modelpasswordtypepasswordnamepasswordlabel密码placeholder密码:rules[{ required: true, message: 请填写密码 }]/div stylemargin: 16pxvan-button block typeprimary native-typesubmit注册/van-button/div/van-formrouter-link classlink to/login有账号去登录/router-link/div
/templatescript
export default {name: register-page,data () {return {username: zhousg,password: 123456}},methods: {onSubmit (values) {console.log(submit, values)}}
}
/scriptstyle langless scoped
.link {color: #069;font-size: 12px;padding-right: 20px;float: right;
}
/styletoast 轻提示
1/组件内 **通过this直接调用
import { Toast } from vant;
Vue.use(Toast) // vant.js内部注册this.$toast(提示内容) // 全局使用2/某个组件内单独导入单独调用
import { Toast } from vant;
Toast(提示内容);实现注册
点击按钮实现注册有成功和错误的报错
async onSubmit (values) {try {await this.$axios({ method: POST, url: /user/register, data: values })this.$toast.success(注册成功)} catch (error) {this.$toast.fail(error.response.data.message)}
}成功注册后转跳到登录的路由
this.$router.push({path:/login})实现登录
点击按钮实现登录的api
async onSubmit (values) {try {const { data } await this.$axios({ method: POST, url: /user/login, data: values })this.$toast.success(登录成功)localStorage.setItem(h5-token, Bearer data.token) // 存token后续所有接口都要用!this.$router.push({ path: /article }) // 路由切换主页layout下Arcticle路由} catch (error) {this.$toast.fail(error.response.data.message)}
}统一错误处理
request.js响应拦截器统一处理错误提示
import { Toast } from vant// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 对响应数据做点什么return response.data
}, function (error) {if (error.response) {// 有错误响应, 提示错误提示Toast(error.response.data.message)}// 对响应错误做点什么return Promise.reject(error)
})路由拦截
token去限制
这个 面经移动端 项目只对 登录用户 开放如果未登录一律拦截到登录 如果访问的是首页无token 拦走 如果访问的是列表页无token拦走 如果访问的是详情页无token拦走
....
分析哪些页面是不需要登录就可以访问的 注册 和 登录 白名单
核心逻辑
判断用户有没有token 有token 直接放行没有token如果是白名单中的页面直接放行否则无token且在访问需要权限访问的页面直接拦截到登录
vue路由内置了一个语法
**全局前置守卫 路由守卫 **
所有的路由一旦被匹配到在真正渲染解析之前都会先经过全局前置守卫只有全局前置守卫放行才能看到真正的页面
// 全局前置守卫
// 1. 所有的路由一旦被匹配到在真正渲染解析之前都会先经过全局前置守卫
// 2. 只有全局前置守卫放行才能看到真正的页面// 任何路由被解析访问前都会先执行这个回调
// 1. from 你从哪里来 从哪来的路由信息对象
// 2. to 你往哪里去 到哪去的路由信息对象
// 3. next() 是否放行如果next()调用就是放行 放你去想去的页面
// next(路径) 拦截到某个路径页面const whiteList [/login, /register] // 白名单列表记录无需权限访问的所有页面router.beforeEach((to, from, next) {const token localStorage.getItem(h5-token);// 如果有token直接放行if (token) {next()} else {// 没有token的人, 看看你要去哪// (1) 访问的是无需授权的页面白名单也是放行// 就是判断访问的地址是否在白名单数组中存在 includesif (whiteList.includes(to.path)) {next()} else {// (2) 否则拦截到登录next(/login)}}
})未完待续 同学们请等待下一期
全套笔记资料代码移步 前往gitee仓库查看
感兴趣的小伙伴可以自取哦欢迎大家点赞转发~
