Vue3学习记录

1.需要知道的文件夹定义

src/views文件夹存放所有的页面视图
src/components文件夹存放所有的分布视图
src/router文件夹的index.js配置所有页面视图信息，和页面请求过滤
src/plugins自定义js文件，用于扩展 vue ，比如多语言切换支持
src/utils自定义js文件，用于存放一些通用方法，比如封装axios
src/assete文件夹存放公共资源css、图片等
public文件夹存放静态资源，比如上传的图片，或者可以直接访问的文件

2.Vue 视图和分布式视图的标准模板

<template>
  <!-- template 标签,一个vue视图的所有html页面内容都要写在这里 -->
</template>
<script>
  //引用模块
  import { defineComponent } from '@vue/composition-api'
  //引用分布式图
  import vMenu from '@/components/Menu.vue'
  export default {
    setup() {
      //定义页面自用属性、方法等
    },
  }
</script>
<style scoped>
  /* 页面独立样式表,只会在本视图生效 */
</style>

3. index.html 、main.js 、App.vue

Vue其实就是在 index.html 页面中通过更新渲染，来展示不同页面。打开 index.html 我们会看到 <div id="app"></div> ，然后我们在 main.js 会看到 .mount('#app') vue 挂载到到这个 div，也就是说整个页面选择就是通过 vue 改变这个 div 的内容来实现页面的展示。而 App.vue 就相当于整个 vue 程序的开始点，类似于一个程序的 main 方法，所以通常我们的 App.vue 就是这个样子的

<template>
  <router-view />
</template>
<script>
  export default {}
</script>

仅仅写了页面初始化，当然你也可以在这里引用一些公共样式表，初始化一些本地公共数据什么的，而真正的页面内容都不会写在这里，当然你非要写，没也什么。

4. router/index.js 路由，可访问页面配置

views 文件夹中的所有视图都是可访问视图，然而如果想要访问这些页面，那么你必须进行配置，告诉 vue 这些页面可以访问，我们在 main.js 看到的 .use(router) 就是读取的可访问页面配置，配置单页面或嵌套页面都可以，同时路由本身还有几个过滤器方法，比如常用的 router.beforeEach((to, from, next) => { do something }) 在页面请求前进行过滤，例如验证是否有页面访问权限。

5. store/index.js 本地存储，预设本地保存数据结构

我们在 main.js 看到的 .use(store) 就是加载了本地存储的模板，之后我们在页面就可以通过引用本地存储模块来对这些对象进行操作，同时其他页面绑定了这些对象的地方也会更新渲染，相当于全局公共变量
ps：注意和html本身的 localStorage 区分，一个是 html 原生功能，是会写入到磁盘的实体数据，一个是通过 vue 生成的全局临时数据，一旦关闭页面这些数据就不存在了。

6.请求跨域，vue.config.js 来解决

封装好 axios 请求代码，写好 .netcore api代码，完活开整，啪！跨域请求失败，打脸很快啊！然后就是翻 axios 跨域解决方案，又是改 api 代码允许跨域，结果啪啪啪打脸很快哈，因为跟这些一点关系也没有，vue.config.js 我们需要配置它！我个人是设定 api 这个域下面的控制器都是用来接收 vue 请求的，所以我封装好的 axios 只需要通过传参 'url':''/api/控制器名/方法名' 就可以正常请求数据了

module.exports = {
  transpileDependencies: true,
  devServer: {
    open: true,
    host: '127.0.0.1',
    port: 8080,
    https: false,
    // 以上是本地配置,下面才是跨域请求配置
    proxy: {
      '/api': {
        target: 'https://127.0.0.1:44376/api/', //这里后台的地址模拟的;应该填写你们真实的后台接口
        ws: true,
        changOrigin: true, //允许跨域
        pathRewrite: {
          '^/api': '', //请求的时候使用这个api就可以
        },
      },
    },
  },
}

7.模拟表单提交

首先为你的 axios 的 header 添加 headers: { 'Content-Type': 'multipart/form-data' } ，当然如果你不想全局都用表单提交，可以单独封装一个专门提交 form 的方法，单独添加这个 header ,接着需要自己手动创建表单对象然后赋值，最后 post 出去后台接收数据，比如 .NetCore 用 IFormCollection form 来接收。

let formData = new FormData()
formData.append(key, value)

8.上传，使用 Element 的上传模块

要注意上传标签的 name 属性同接收代码中的对象名要一致，例如 name="files"，那么我 .NetCore 接收对象就是 FormFileCollection files ，因为本地开发的时候同样有跨域问题，所以 action 属性值这里要注意，和跨域的 post、get 的 url 一样的写法，因为读取图片不存在跨域问题，所以自己设定个全局变量，用于拼接完整图片地址。

 

待续

附录

学习参考模板[vue-manage-system]

Vue3 的 ElementPlus 模块是真的好用，各种页面控件很齐全

遇到因为模块版本之间不兼容，导致【Failed to load config】的时候可以尝试，npm i 模块名 空格 模块名 --save-dev 对这些存在版本不兼容的模块进行兼容处理，如果要卸载这些模块用 npm uninstall i 模块名