位置: IT常识 - 正文

我的VUE 学习之路(下)(vuexy)

编辑:rootadmin
我的VUE 学习之路(下)

推荐整理分享我的VUE 学习之路(下)(vuexy),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue myui,vuexy,vuexy,vue myui,vuexy,vuexl,vue教学文档,vue myui,内容如对您有帮助,希望把文章链接给更多的朋友!

前言:

        在经历过前面在HTML下的VUE相关基础的洗礼后,我们可以动手去做一些事了,此时发现直接通过直接VUE组件方式与之前在HTML不同,首先要“静一静”,细看之下只是对之前的很多写法做了封装。

        本文旨在直接上手Vue项目下做测试而非前面的那种方式。

预期目标:VUE项目开发的基本理解

使用工具:HBuilder

学习前技术储备:VUE 在HTML下的使用

零、准备

下载与配置Vue CLI

注意事项:

创建项目时如果提示:无法加载文件 vue.ps1.......

解决方案:

1.以管理员身份打开windows PowerShell 

2.输入:set-ExecutionPolicy RemoteSigned 

3.选择y或者a

4.回车 就可以了

一、Vue 项目走步

1.1.项目创建

 1.在对应的目录上支行CMD或终端

2.输入 vue create XXX                                        [xxx 是项目名称]

3.选择配置(如下图)通常情况下需要手动配置

 4.手动配置 选项说明

        4.1Babel (默认选中)(选中)

        4.2 TypeScript  --TS库 

        4.3 Progressive Web App...

        4.4 Router        --路由组件(建议选中)

        4.5 Vuex           --状态组件(建议选中)

        4.6 CSS Pre-processors  --样式管理(建议选中)

        4.7 Linter / Formatter(默认选中)(个人不推荐 稍有错误就会提示错误,影响开发速度)

        4.8 Unit Testing  --测试

        4.9 E2E Testing  --测试

5.创建就慢慢等

6.创建后可以使用WebStrom 、VScode 、Hbuilder以项目的打开(导入)就可以了

我的VUE 学习之路(下)(vuexy)

1.2.项目结构

1.3.项目文件

 系统处理顺序个人理解是:public/index.html  -> main.js->App.vue(如果不对请留言指正)

1.4.项目示例

HomeView.vue 文件调用模组Demo.vue

<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"><!-- <HelloWorld msg="Welcome to Your Vue.js App"/>--> <demo></demo> </div></template><script>// @ is an alias to /src// import HelloWorld from '@/components/HelloWorld.vue'import Demo from '@/components/Demo'export default { name: 'HomeView', components: { // HelloWorld, Demo }}</script><template> <div> {{msg}} <input type="text" ref="mytest"> <button @click="test()">测试</button> <ul> <li v-for="data in inputData" :key="data">{{data}}</li> </ul> </div></template><script>// 接口export default { // eslint-disable-next-line vue/multi-word-component-names name: 'Demo', // 数据层 data () { return { msg: '这是一个Demo', inputData: [] } }, // 事件 methods: { test () { // eslint-disable-next-line no-sequences,no-unused-expressions console.log(this.$refs.mytest.value), this.inputData.push(this.$refs.mytest.value) } }}</script>二、反向代理概念

它存在的意义在于解决跨域问题,主要是通过修改vue.config.js 处理。

(ps:修改后要重新启动一下才生效)

const { defineConfig } = require('@vue/cli-service')// 示例解决 http://t.163.move/getMove/getById?10module.exports = defineConfig({ transpileDependencies: true, devServer: { proxy: { '/getMove': { // API标识 target: 'http://t.163.move', // 代理标识 // wss: true, changeOrigin: true } } }})// 调用 axios.get("/getMove/getById?10").then(res=>{res.data})三、路由

        路由顾名思意就是负责转发或跳转的,与我们生活中的路由器的工作方式相同;在下载的文件中包含了一个示例(router\index.js),所有接受路由的地方需要用<router-view></router-view>容器接收。

 一级路由

        其实VUE在创建时就给示出一个一级路由实例;

        App.vue

<template> <div id="app"> <nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> | </nav> <router-view/> </div></template><style lang="scss">#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50;}nav { padding: 30px; a { font-weight: bold; color: #2c3e50; &.router-link-exact-active { color: #42b983; } }}</style>

       router\index.js

import Vue from 'vue'import VueRouter from 'vue-router'import HomeView from '../views/HomeView.vue'Vue.use(VueRouter)const routes = [ { path: '/',//访问路径 name: 'home',//命名 component: HomeView //外部注册 这里直接使用 }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')//内部引用 }]const router = new VueRouter({ mode: 'history',//路由模式 展示方式 base: process.env.BASE_URL, routes})export default router 多级路由

作用:用于访问子路径  通常使用在二级目录配置

Demo.vue 模拟父(注意定义对应接收标签)

<template> <div> 这是一个Demo 为的是展示二级(多级)路由 <!-- 设置好容器--> <router-view></router-view> </div></template>

定义两个子组件 A.vue  与B.vue

<template> <div> A </div></template><template> <div>B</div></template>

配置路由新增

{ path: '/demo', name: 'demo', component: Demo, children:[ { path:'a', name:'a', component:A }, { path:'b', name:'b', component:B } ] }动态路由

用途:主要用于路径是变化,但格式固定,通常使用在列表中的详情页

ProductDetail.vue 模拟产品详情

<template> <div> 这是一个组件 <div> {{id}}</div> </div></template><script>export default { data(){ return{ id:"" } }, mounted(){ this.id=this.$route.params.id }}</script>

AboutView.vue 模拟数据(产品)列表页,用于发出明细请求

<template> <div class="about"> <h1>This is an about page</h1> <ul> <li v-for="data in list" :key="data.id" @click="theProduct(data.id)"> {{data}} </li> </ul> </div></template><script>export default { data(){ return{ list:[{id:1,code:"aa"},{id:2,code:"bb"},{id:3,code:"cc"}] } }, methods:{ theProduct(id){ this.$router.push(`/detail/${id}`)//指向router这个目录下的配置实现跳转 动态路由方式1 //this.$router.push({name:"detail",params:{id:id}})//动态路由方式2 通过命名路由方式跳转 } }}</script>

路由配置

import Vue from 'vue'import VueRouter from 'vue-router'import HomeView from '../views/HomeView.vue'import ProductDetail from '../components/ProductDetail'Vue.use(VueRouter)const routes = [ { path: '/',//访问路径 name: 'home',//命名 component: HomeView //外部注册 这里直接使用 }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')//内部引用 }, { path:'/detail/:id', name:'detail', component: ProductDetail }]const router = new VueRouter({ mode: 'history',//路由模式 展示方式 base: process.env.BASE_URL, routes})export default router 路由拦截

作用:路由前的校验,一般用于登陆等

如下代码在路由js中添加进去代表当不是demo路径的访问就放行

//路由拦截配置 router.beforeEach((to,from,next) =>{ if (to.name !=='demo'){ next() } })路由定向

作用:当访问未在路由内部配置的路径时要自动指向指定的路径

如下配置当访问 .../demo/c的时候自动转向.../demo这个路径上

{ path: '/demo', name: 'demo', component: Demo, children:[ { path:'a', name:'a', component:A }, { path:'b', name:'b', component:B }, { //重定向 path: '*', redirect:'/demo' } ] }

全部示例代码

components\productDetail.vue

<template> <div> 这是一个组件 <div> {{id}}</div> </div></template><script>export default { data(){ return{ id:"" } }, mounted(){ this.id=this.$route.params.id }}</script>

router\index.js

import Vue from 'vue'import VueRouter from 'vue-router'import HomeView from '../views/HomeView.vue'import ProductDetail from '../components/ProductDetail'import Demo from '../views/Demo'import A from '../views/Demo/A'import B from '../views/Demo/B'Vue.use(VueRouter)const routes = [ { path: '/',//访问路径 name: 'home',//命名 component: HomeView //外部注册 这里直接使用 }, { path: '/about', name: 'about', component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')//内部引用 }, { path:'/detail/:id', name:'detail', component: ProductDetail }, { path: '/demo', name: 'demo', component: Demo, children:[ { path:'a', name:'a', component:A }, { path:'b', name:'b', component:B }, { //重定向 path: '*', redirect:'/demo' } ] }, //重定向:在顶级目录中不存在的数据自动指向首页 { path: '*', redirect:'/' }]const router = new VueRouter({ mode: 'history',//路由模式 展示方式 base: process.env.BASE_URL, routes})//路由拦截配置// router.beforeEach((to,from,next) =>{// if (to.name !=='demo'){// next()// }// })export default router

views\AboutView.vue

<template> <div class="about"> <h1>This is an about page</h1> <ul> <li v-for="data in list" :key="data.id" @click="theProduct(data.id)"> {{data}} </li> </ul> </div></template><script>export default { data(){ return{ list:[{id:1,code:"aa"},{id:2,code:"bb"},{id:3,code:"cc"}] } }, methods:{ theProduct(id){ this.$router.push(`/detail/${id}`)//指向router这个目录下的配置实现跳转 动态路由方式1 //this.$router.push({name:"detail",params:{id:id}})//动态路由方式2 通过命名路由方式跳转 } }}</script>

views\Demo.vue

<template> <div> 这是一个Demo 为的是展示二级(多级)路由 <!-- 设置好容器--> <router-view></router-view> </div></template>

views\Demo\A.vue

<template> <div> A </div></template>

views\Demo\B.vue

<template> <div>B</div></template>

App.vue

<template> <div id="app"> <nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> | <router-link to="/detail">detail</router-link> </nav> <router-view/> </div></template><style lang="scss">#app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50;}nav { padding: 30px; a { font-weight: bold; color: #2c3e50; &.router-link-exact-active { color: #42b983; } }}</style>四、Vuex

vuex 是Vue家族中的状态管理工具。PC端常用于权限管理,移动端则多数用于懒加载。其配置文件前文已介绍就是store目录下的index.js文件。请大家看我针对这个文件的注释

import Vue from 'vue'//引用vueimport Vuex from 'vuex'//引用状态管理import axios from 'axios'Vue.use(Vuex) //加载//导出export default new Vuex.Store({ state: { //---------------作用:共享数据 第三个加载 productList:[] }, getters: { //---------------作用:数据二次加工方法 getProductListTop3(state){ return state.productList.filter((item,index)=>index<4) } }, mutations: { //---------------作用:配置系统常量比如登陆的账户信息、权限信息等 第二个加载 setProductList(state,data){ state.productList=data } }, actions: { //---------------作用:异步加载 条件执行,常用于懒加载 第一个加载 getProductList(store){ axios({ url:"http://127.0.0.1:2022/company-work-time/findByCompanyId?companyId=74" }).then(res=>{ //state.productList=res.data; store.commit("setProductList",res.data.data) console.log(res.data.data) }) } }, modules: { //---------------状态树,暂时用不到,一般较大项目使用,相当于
本文链接地址:https://www.jiuchutong.com/zhishi/299795.html 转载请保留说明!

上一篇:ChatGPT-4.0 : 未来已来,你来不来(xch 未来)

下一篇:【NLP屠夫系列】- NER之实战BILSTM(网络用语屠夫)

  • 荣耀magic3怎么滚动截屏(荣耀magic3怎么截长图)

    荣耀magic3怎么滚动截屏(荣耀magic3怎么截长图)

  • 荣耀30pro屏幕刷新率是多少(荣耀30pro刷屏多少)

    荣耀30pro屏幕刷新率是多少(荣耀30pro刷屏多少)

  • adobe creative cloud有什么用(adobe creative cloud可以卸载吗)

    adobe creative cloud有什么用(adobe creative cloud可以卸载吗)

  • 华为p30pro可以使用5g功能吗(华为p30Pro可以使用OTG吗)

    华为p30pro可以使用5g功能吗(华为p30Pro可以使用OTG吗)

  • 手机一直震动但没消息(手机一直震动但没有声音)

    手机一直震动但没消息(手机一直震动但没有声音)

  • 抖音极速版怎么私聊作者(抖音极速版怎么赚钱 一天能赚多少)

    抖音极速版怎么私聊作者(抖音极速版怎么赚钱 一天能赚多少)

  • 微博手机号码已经不用了怎么办(微博手机号码已经不用了密码也忘了)

    微博手机号码已经不用了怎么办(微博手机号码已经不用了密码也忘了)

  • 微信视频为什么没有声音提醒(微信视频为什么会横过来)

    微信视频为什么没有声音提醒(微信视频为什么会横过来)

  • qq亲密关系别人能看到吗(QQ亲密关系别人解了)

    qq亲密关系别人能看到吗(QQ亲密关系别人解了)

  • apn接入点是什么意思(手机apn接入点有什么不一样的)

    apn接入点是什么意思(手机apn接入点有什么不一样的)

  • 淘宝红包省钱卡怎么用(开通淘宝红包省钱卡)

    淘宝红包省钱卡怎么用(开通淘宝红包省钱卡)

  • 胶片相机可以传手机吗(胶片相机可以传到电脑吗)

    胶片相机可以传手机吗(胶片相机可以传到电脑吗)

  • 考勤机显示找不到u盘(考勤机找不到指定模块)

    考勤机显示找不到u盘(考勤机找不到指定模块)

  • 计算机的组成有哪些(计算机的组成有CPU)

    计算机的组成有哪些(计算机的组成有CPU)

  • drvpath是什么文件夹(driv什么意思翻译)

    drvpath是什么文件夹(driv什么意思翻译)

  • 晶体管时代是第几代(晶体管时代是第几代计算机)

    晶体管时代是第几代(晶体管时代是第几代计算机)

  • 抖音企业号怎么改名字(抖音企业号怎么恢复个人账号)

    抖音企业号怎么改名字(抖音企业号怎么恢复个人账号)

  • ps怎么裁剪画布(ps怎么裁剪画布形状)

    ps怎么裁剪画布(ps怎么裁剪画布形状)

  • 淘宝历史记录怎么查(淘宝历史记录怎么查不到)

    淘宝历史记录怎么查(淘宝历史记录怎么查不到)

  • 苹果如何取消自动续费(苹果如何取消自动更新系统)

    苹果如何取消自动续费(苹果如何取消自动更新系统)

  • 华为p20pro超级夜景怎么用(华为p20夜景模式怎么设置)

    华为p20pro超级夜景怎么用(华为p20夜景模式怎么设置)

  • 快手里买的东西怎么查(快手里买的东西怎么查订单)

    快手里买的东西怎么查(快手里买的东西怎么查订单)

  • 水滴屏手机为什么便宜(水滴屏手机为什么会发烫)

    水滴屏手机为什么便宜(水滴屏手机为什么会发烫)

  • 如何取消知乎自动续费(如何取消知乎自动续费苹果)

    如何取消知乎自动续费(如何取消知乎自动续费苹果)

  • 小米6如何连接电脑(小米6如何连接苹果手机)

    小米6如何连接电脑(小米6如何连接苹果手机)

  • 电脑怎么更新系统?有什么办法可以更新?(电脑怎么更新系统日期)

    电脑怎么更新系统?有什么办法可以更新?(电脑怎么更新系统日期)

  • 技嘉主板无法安装Win11怎么办?(技嘉主板无法安装网卡驱动)

    技嘉主板无法安装Win11怎么办?(技嘉主板无法安装网卡驱动)

  • 微软 Win11 Build 22468预览版更新推送:修复 Wi-Fi、显示等多项 Bug(微软surface售后电话人工)

    微软 Win11 Build 22468预览版更新推送:修复 Wi-Fi、显示等多项 Bug(微软surface售后电话人工)

  • fpassist.exe是什么进程 有什么作用 fpassist进程查询

    fpassist.exe是什么进程 有什么作用 fpassist进程查询

  • 自行申报是什么征收方式
  • 收购分公司和谁签协议
  • 折扣折让属于什么科目
  • 公司销户本金转到哪里
  • 发票未到已验收什么意思
  • 替票怎么控制数量
  • 个人转款到对公账户会计分录
  • 股权转让所得交所得税吗
  • 长期股权投资稀释
  • 外购产品赠送他人合法吗
  • 私对私转账是否缴纳个人所得税
  • 涂料发票几个点的税
  • 取得的技术成果
  • 定金转为货款金额需要特别约定吗?
  • 食堂货款报账明细表
  • 合同税率16%调整到13%怎么算
  • 分包给总包开什么发票
  • 车辆租赁怎么报税做账
  • 金蝶旗舰版反过账的操作步骤
  • 临时使用自建商品房是否需要缴纳房产税?
  • 财务中暂估入账会计分录
  • 保税区开出的专票可以抵扣吗
  • 政府专项基金是什么
  • 对公账户开户费开户的时候就要交钱吗
  • 应缴纳增值税计什么科目
  • vue项目页面写在哪里
  • 工伤补贴如何做凭证
  • 以土地投资溢价的公司
  • 销售产品的运输费属于什么会计科目
  • 政府给的土地补偿标准
  • php curl命令详解
  • ai当前的发展
  • vue的路由跳转了,可是页面没有变化
  • html5/css3
  • word2vec使用方法
  • opencv图像识别特定形状
  • php获取文件名称
  • 完善固定资产管理的方案
  • 银行存款利息应记什么科目
  • 公益性捐赠递延注会
  • 二手车交易账务处理
  • 费用按照归属的不同可分为
  • 长期应付款科目的涉税风险
  • 接受母公司捐赠现金分录
  • 公司购入的财务会计分录
  • 其他应付款在现金流量表
  • 存货的发出计价方法有哪些
  • 贴现公司贴现合法吗
  • 资产负债表和科目余额表怎么核对
  • 福利部门的福利有哪些
  • 待抵扣进项税额借贷方向
  • 年化利率是什么意思
  • 企业建账的流程是怎样的
  • 旧账整理方案
  • 各单位应当根据需要设立专职或者兼职
  • 零售商品销售的具体核算步骤
  • 连接mysql数据出错1045
  • win7打开浏览器很慢
  • windows2003怎么开启远程
  • 怎么修改注册表的权限
  • win7共享设置(详细图文步骤)
  • linux 常用命令大全及其详解
  • wim10飞行模式
  • win7旗舰版系统激活密钥
  • js立即执行函数几种写法
  • 批处理删除注册表指定项
  • jquery日程安排
  • Linux中删除文件夹的正确方式
  • vue实现分页功能
  • 如何解决android兼容问题
  • JavaScipt中Function()函数的使用教程
  • jquery valid()
  • 虚拟摇杆 安卓
  • python中对象的概念
  • javascript面向对象精要pdf下载
  • 机票的抵扣率是多少
  • 税务行政部门有哪些
  • 出口免税不退税主要适用于
  • 山东省国家税务局威海培训中心
  • 远程视频监控设备
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设