vue3使用记录

npm运行时WAEN提示

使用vue首先安装node.js，下载地址
安装16.15.1 ，为长期支持版本
安装后，在命令行执行npm命令，发现会提示异常

该异常是因为node.js 自带的npm配置文件和npm版本不匹配。新版的npm不再支持参数 -g作为全局参数，需要改为–location=global
找到node.js的安装目录，把npm.cmd文件中的prefix -g 修改为 prefix --location=glocal 保存后，再次打开命令窗口，执行npm命令不再提示异常

基本插件说明

建议以手动方式创建vue项目，这样可以把基本的插件都选择上，之后会自动安装。
若选择了自动安装vue项目，这需要手动配置和安装插件，比较麻烦

以手动方式创建vue，可以勾选需要的配置，红框中的配置不需要，其他的都选上

bable、typescript
这两个都是一个js编译器，可以把高版本的js文件，如ts，编辑为普通js文件，以便在所用浏览器顺利执行。各有各的好处，可以只安装其中一个，或者都安装

webpack
上面选项中没有webpack，是因为vue项目脚手架中已经内置了webpack的安装，因为如果webpack是vue项目的核心。
webpack是一个打包工具，打包js、css、图片、html等，它可以分析整个项目的文件结构，确认文件之间的依赖，将文件合成、压缩、加入hash等，生成最终一个js项目文件，较少了网络请求次数。
webpack内置只能处理js，但是它可以加载很多的loader处理css,img,ts,vue等其他文件,最终输出js文件。webpack的配置文件中，可以配置laoder选项的编译器是使用babel还是typescript

Eslint
一路回车后，到linter后需要选择一个检测级别

选第一个就行，其他的检测规则太多，会检测各种位置是否需要和不需要空格

vue中安装依赖模块

使用vue-cli创建项目后，在项目中引入模块，在项目根目录执行npm命令
npm install 模块名 -S，该命令把模块下载到node_module文件夹，并在package.json的dependencies 中添加该模块
npm install 模块名 -D，该命令把模块下载到node_module文件夹，并在package.json的devDependencies中添加该模块

dependencies 是在生产环境中要用到的依赖
devDependencies是在开发环境中要用到的依赖
举个栗子：
构建工具：webpack是用来压缩代码，打包等需要的工具，程序实际运行的时候并不需要，就要放在dev中所以要用 -D。
项目插件：例如bootstrap、mint-ui这种插件要在运行中使用的，就要放在dep中所以就用 -S。

安装依赖时，npm由于版本关系，对模块会有严格检查，会报错，如下

可在最后添加相关参数规避报错，如下

npm install element-plus -S --legacy-peer-deps

vue3 语法和规范

• 以后缀vue结尾的组件文件，命名尽量使用驼大峰方式。大于两个单词

• 组件定义时，prop属性定义和在模板中使用时，用小驼峰写法。引用组件时，v-bind后需要跟属性的用小写，使用-连接

• ts语法问题
  
  ts语法中使用this.data 获取属性值会报错，Property ‘id’ does not exist on type
  这是因为Typescript在执行代码检查时,如果该对象没有定义相应属性的类型，就会产生该报错。
  可以用类型断言来强制通过TS的编译，如下
  
  当script中使用的组件没有ts语法时，我们可以直接去掉script中的ts标签，不使用ts编译即可

• vue中，ref和reactive变量都使用const声明即可，不需要使用let

• 定义和使用全局变量
  方法一，使用provide和inject
  只能在setup中使用inject获取全局变量
  
  使用，需要在setup中调用，不能在setup中定义的方法内调用，和globalPropertie类似
  

方法二，使用config.globalPropertie
在main.js中，createApp创建实例成功后，调用该方法如下

const app = createApp(App)
app.config.globalProperties.$wpy = 'wang'

在其他地方使用，在模板中使用时，可以直接{{KaTeX parse error: Expected 'EOF', got '}' at position 4: wpy}̲} 在组件中使用时，this.wpy

当在setup中使用时，因为setup没有生成组件实例，不能使用this
我们可以使用getCurrentInstance 获取内部组件实例，如下

import {  getCurrentInstance } from 'vue'
const Wpy = getCurrentInstance().appContext.config.globalProperties.$wpy

• 使用import引入模块或文件
  使用import 导入时，若不加相对路径如 ./ 或…/ ,会自动从node_module目录中查找模块或文件
  若加了@/，则从src目录中查找文件或模块。@的路径在webpack配置中设定
  若导入的是一个模块，没有指定文件名，则自动加载该模块下的index js或ts文件
• vue3中引入图片
  如果图片在public目录下，可以直接写图片的路径，不加public和/
  如果图片在src目录下，则需要使用import来引入图片

axios跨域设置

服务器端配置

在服务器段设置allow-origin

vue设置代理

首先，在vue.config.js中，设置devServer参数，如下

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    // open: true, //启动应用时是否打开浏览器
    port: 9090   // vue服务的端口号
    // 设置跨域代理
    proxy: {
       '/api': { // 代理名称，可随意填
         target: 'http://127.0.0.1:8080/', // 接口地址host地址
         ws: true, // 是否开启websocke跨域
         changeOrigin: true,
         pathRewrite: {
           '^/api': ''
         }
       }
     }
  }
})

然后在axios初始化时，把代理名称填写到baseUrl即可，如下

const $axios = axios.create({
  baseURL:'/api',// 设置代理后，这里填写代理的名称
  // baseURL: 'http://127.0.0.1:8080/',// 不使用代理时，填写接口host地址
  timeout:2000,
  // withCredentials:true // 跨域请求时是否携带cookie验证,。当该值为ture时，服务器中的allow-origin不能设置为*，需要指定为确定的host
})

做完以上配置后，要终止vue，然后再重新开启。vue的热重启是加载不到这些配置的

element-plus使用

使用中发现，element组件中有些有些属性是一个静态值，不需要绑定动态数据时，但是使用时还是需要进行绑定，否则无效
比如

 <el-col :span="24"><div class="grid-content ep-bg-purple-dark" /></el-col>

span指定了一列占用的栏数，是个固定的数字，为什么还要用冒号绑定呢。
仔细查看文档后发现，span 需要传入一个数字型值，我们此处传递的是一个字符串。
如果我们不使用冒号绑定，该属性是无效的。但是绑定后，vue认为后面传入的是一个变量名或者表达式，会自行转换为数字。

除了字符串类型的属性，其他类型的参数，我们最好加上冒号，以避免属性不生效。