vue踩坑和其他

开始

7/22截止，我花了3天熟悉vue框架，并制作了一个简易的网站。虽然对于vue的工作原理不够熟悉，但是对于其应用有了一定了解

vue-cli

vue官网上的介绍主要是关于vue如何使用的。但是在开发时还是需要用到vue-cli。vue-cli简化了开发逻辑，并通过build生成了html, css和js文件。

vue的工作方式是：多个组件挂载到一个页面上，因此整个工程只有一个html文件即index.html。而根据切换绑定的组件，可以达到跳转不同页面的效果。

一个vue-cli工作目录如下：(vue-cli3)

public: 里面有index.html即页面，其他是一些页面图片之类的

src: 工程文件

src下：assets：放图片

components: 放公共组件

router: 里面有一个index.js，控制路由

views: 里面是不同的vue组件，通过切换组件可以达到展示不同页面的效果

App.vue: 入口

main.js: 入口

需要修改的地方是：views和components，以及一些图片放在assets中。而默认的入口App.vue和main.js不要修改。

如果有多个view，那么在router的index.js中进行注册，可以实现页面跳转。

安装了一个npm以后，新建一个工程的方法是：

在需要新建的位置，用命令行打开，然后vue ui

显示出一个ui界面，然后点击右下角的首页，进入首页，新建工程。

工程的具体配置可以选择，然后一步一步next即可。

最后打开本地文件夹，即可看到上述目录。

使用npm run serve测试工程

使用npm run build打包成html,js,css文件，打包结果在disk文件下

vue

xxx.vue文件有三个组成部分：

template：放置组件的html代码

js: 放置组件的js代码

style: 放置组件的css代码

用vscode打开工程文件夹，然后新建一个vue文件，输入vue，出现默认vue框架：

<template>
  
</template>

<script>
export default {

}
</script>

<style>

</style>

重点是export defalt里面：

1.组件的成员变量：使用data函数返回，里面的变量都是响应式的，可以在template中，使用this.A, this.B进行显示，也可以在其他函数中使用。

data(){
return {
	A:0,
	B:0,
	...
	}
}

2.函数写在methods中，可以在template里面直接调用

3.如果有数据读取，必须在mouted生命周期中进行，即

mounted(){
	//对A进行请求，获得值
}

还有beforeDestroy是析构函数

vue路由

1.在index.js中注册，方式是:

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/do-excise/:data',
        name: 'do-excise',
        component: DoExcise,
    }
]

do-excise是真实的路由，而:data是通过路径传递的参数

跳转方：

   this.$router.push({
       path: "/"
   }); 

不传递任何参数

或者是：

this.$router.push({
      name: 'do-excise',
      params: {
          data: JSON.stringify(curExcSetList),
      }
  });

name是目的组件，params是传递的参数，必须在目的组件注册时使用:进行注册。如果传递参数，不能使用path进行跳转，必须使用name

接受方：传入的参数在this.params.xx中

vue build

vue3在build的时候会出现问题，比如资源文件404not found，解决方法很简单：

在工程目录下新建一个vue.config.json，里面输入:

module.exports = {
    publicPath: './'
  }

然后build，打开index,html不报错，说明build成功。

vue 读取文件

如果是数据存储，使用loacalStorage

如果读取json，使用axios.get。axios安装失败：必须在工程文件夹下进行安装

get里面成功的回调函数直接赋值给变量无法成功，但是如果进行t.push.apply(t, get_data)是可以成功的。

t是get外部的一个变量。

尾声

欢迎参观我的工程，我将其部署在了github page

https://hggshiwo.github.io/exchelper/index.html#/