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

创建vue项目

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

在DOS窗口下在指定目录下执行vue ui,然后在 http://localhost:8000页面下进行相关的配置即可。
Vue快速完成前后端开发的相关问题

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 时间组件、下拉框的弹出框的样式的修改

参考

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/282198.html