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

标签：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

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

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

2.$route

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

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

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

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

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

vue中实现路由跳转的方式

1. 使用replace方法
   1. 不带参数

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

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

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

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

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

2. 使用router-link标签，它相当于a标签
   1. 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>
   

   2. replace属性：控制路由跳转时操作浏览器历史记录的模式，replace表示替换当前记录。
3. 使用push()方法
   1. query传参

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

   2. params传参

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

4. 使用go()方法

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

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

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

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

@click.native中的native属性

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

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

刷新浏览器中的当前窗口

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

window.location.reload();

路由

路由的分类

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

路由的常用配置项

参考

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

vue中this.$refs的应用

1. ref编写在原生的HTML标签上：this.$refs.xxx,获取的是标签对应的DOM元素
2. 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组件

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

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

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

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

参考

vscode中调试vue项目中的代码

参考

在Vue组件中获取vuex的状态

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

如何清除动态路由信息

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

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

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

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

1. 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文件夹所在的路径"
   

   3. 配置环境变量：新建变量名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图片添加动态路径，路径正确图片不显示

1. 问题演示

 <!-- 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>

2. 解决办法是：

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

多语言插件

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

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

1. 安装sass-loader

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

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

参考

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