首页 > 其他分享> 文章详细

Vue快速完成前后端开发的相关问题

2022-08-25 18:30:12 阅读：236 来源： 互联网

标签：node Vue route 前后 vue 组件 router 快速路由

创建vue项目

1.使用GUI界面创建Vue工程

在DOS窗口下在指定目录下执行vue ui,然后在 http://localhost:8000页面下进行相关的配置即可。

2.在DOS窗口下

使用vue create 项目名称命令创建项目

前端访问后端接口

前端通过Ajax请求访问后端的Restful接口。因此需要安装axios插件。(axios封装了Ajax请求相关操作)

vue add axios

Element UI

在图形界面下搜索ElementUI插件进行安装

$router和$route的应用

1.$router

获取router文件夹下index.js中定义的routes通过$router.options.routes就可以获取自定义的routes对象
可以进行编程式导航的路由跳转

例如
this.$router.push()
this.$router.replace()

2.$route

在vue组件中获取跳转到当前组件的path

this.$route.fullPath
或者如下
this.$route.path

获取路由的信息以及路由跳转传递的参数

// 例如在meta中定义一个表示true、false的字段
// 控制是否显示当前路由对应的组件
this.$route.meta 

this.$route.params
this.$route.query

vue中实现路由跳转的方式

使用replace方法

不带参数

this.$router.replace({path: '/xxx'})

query传参：相当于浏览器中发送get形式的请求，参数拼接在URL后面

// 传参
this.$router.replace({path:'/xxx',query:{id:'111'}})
// 获取参数的值
this.$route.query.id

params传参：属于路径当中的一部分

// 传参
// 配置路由的时候需要使用占位符声明接收params参数
path:'/serach/:keyword'
// params参数可以传递，也可以不传递
path:'/serach/:keyword?'

使用router-link标签，它相当于a标签

to属性：指定跳转的目标地址。

//to属性的值有两种写法
写法1:字符串写法
<router-link :to="`/student?id=${id}&mess=${message}`">学生信息</router-link>
写法2：对象写法，其中name属性的值即为命名路由中的name配置项的值
<router-link :to="{
    name: 'School',
    params:{
      address:'杭州',
      id: 23
    },
    query: {
      mess: 'test'
    }
  }">学校信息</router-link>

replace属性：控制路由跳转时操作浏览器历史记录的模式，replace表示替换当前记录。

使用push()方法

query传参

// 传参
this.$router.push('/xxx?id='+row.id)
// 获取参数的值
this.$route.query.id

params传参

 this.$router.push('/search/' + this.keyword)
// 对象写法,name属性属性的值需要在路由配置中配置好
this.$router.push({

    name:'search',
    params:{keyword:this.keyword}
})

使用go()方法

将数据存储于客户端浏览器的方式

使用window对象的localStorage属性：在浏览器中存储键值对的数据。JSON.stringify()方法可以将js对象转为json字符串,JSON.parse()方法则相反。

// 存储
localStorage.setItem(string key,string value)
// 读取
localStorage.getItem(string key);
// 移除
localStorage.removeItem(string key)

使用vue-ls插件，参考vue-ls

@click.native中的native属性

给一个Vue组件绑定DOM原生事件时，需要加上native才能监听原生事件。例如：

<el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>

刷新浏览器中的当前窗口

调用如下方法将会重新载入当前文档

window.location.reload();

路由

路由的分类

constantRoutes：不需要动态判断权限的路由
asyncRoutes:需要动态判断权限的路由

路由的常用配置项

参考

hidden：该属性表示是否隐藏路由。值为true表示不在sidebar显示该路由的meta属性的title值。
redirect：不存在与当前路由匹配的视图（组件），配置redirect属性重定向到其他路由地址。

vue中this.$refs的应用

ref编写在原生的HTML标签上：this.$refs.xxx,获取的是标签对应的DOM元素
ref编写在vue中的组件时：this.$refs.xxx获取的是子组件的引用

<!--在index.vue中有如下定义：-->
<el-form ref="loginForm">
    <el-button :loading="loading" 
    type="primary"
    style="width:100%;margin-bottom:30px;"
    @click.native.prevent="handleLogin">登录
    </el-button>
</el-form>

//handleLogin方法定义如下：
handleLogin() {
  this.$refs.loginForm.validate(valid => {
    if (valid) {
      this.loading = true
      this.$store.dispatch('user/login', this.loginForm).then(() => {
        this.$router.push({ path: this.redirect || '/' })
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    } else {
      console.log('error submit!!')
      return false
    }
  })
}

寻找icon的网站

https://w
ww.iconfont.cn/

keep-alive组件

包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

include属性：缓存指定名称的组件

<keep-alive :include="cachedViews">
    <!-- key属性保证不同的页面key不同-->
    <router-view :key="key" />
</keep-alive>

如何去除浏览器中URL中的#

参考

vscode中调试vue项目中的代码

参考

在Vue组件中获取vuex的状态

通过this.$store.state.xxx来获取

如何清除动态路由信息

this.$router.matcher含有动态路由的相关信息

export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher
}

node和npm版本过高导致npm install安装依赖失败

解决方案：降低node版本即可，新版本的node中自带npm

node.js的环境配置
1. 在安装好的node.js根目录下新建node_global和node_cache文件夹，node_global文件夹下新建node_modules文件夹
2. 在cmd窗口下输入
```
npm config set prefix "node_global文件夹所在的路径"
npm config set cache "node_cache文件夹所在的路径"
```
1. 配置环境变量：新建变量名NODE_PATH,其值为步骤1新建的node_modules文件夹所在的路径；在path变量下新增值为步骤1新建的node_global文件夹所在的路径和新增安装好的node.js所在的根目录。
  自定义node_global的目录是有必要的，因为使用npm install -g 包名进行全局安装的时候默认安装在c盘。可以使用npm root -g命令查看全局安装的位置

除了vue element admin快速搭建系统后台的框架，好用的框架

Ant Design Vue，提供了大量的ui组件。案例：https://pro.antdv.com/

vue中给img图片添加动态路径，路径正确图片不显示

问题演示

 <!-- v-for循环生成div -->
<div class="wrapper" v-for="(event, index) of eventsObj" >
    <div class="img-wrapper">
        <img :src="event['img_urls'][0]" class="imgs" />
    </div>
</div>

解决办法是：

eventsObj: [
        {
            // 事件截图
            img_urls: [
                require("@/views/warning-event/test/test.png"),
                require("@/views/warning-event/test/city.jpg"),
            ], 
        }
    ]

多语言插件

vue-i18n这个插件提供了多语言解决方案。

Vue单文件组件中使用`<style lang="scss"></style>`

安装sass-loader

npm install sass-loader@版本号 --save-dev

Element UI 时间组件、下拉框的弹出框的样式的修改

参考

标签：node,Vue,route,前后,vue,组件,router,快速,路由
来源： https://www.cnblogs.com/xiaocer/p/16625333.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9