开始
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#/
|