vue 总结
1、安装vue：
Win+R 输入：cnpm install -g @vue/cli

验证是否安装成功：vue --version

2、新建Vue工程
在对应文件夹下右击打开集成终端

输入  vue  create  query_system（新建项目名字）名称不能存在大写！！！！！ 但是可以存在横杠等连接符

此处键盘上的上下键可以调整选项，点击空格键切换选中状态，选项前的空格中有✳即为选中状态
query_system
【一】目录说明

通过上述过程，我们可以看到项目加载的过程是
index.tml->main.js->app.vue->index.js->helloworld.vue。这里只是对我们运行项目后，如何出现首页面做了简单的解释，对具体的实现没有进行分析。

【二】路由总结：

【三】事件绑定：

<el-button  type=“primary” @click=“submitForm(‘ruleForm’)”>提交


前后台交互：举例 用Django 创建一个restful api
1.再main.js 里写入
import axios from ‘axios’;
Vue.prototype.$axios = axios;

再vue 按钮事件中写入以下语句

this.$axios.post(‘http://127.0.0.1:8000/api/sum/’, {
var1: 22,
var2: 33,               
}).then(function (response) {

console.log(response.data.data.sum);

alert(‘sum=’+response.data.data.sum);
console.log(response);
}).catch(function (error) {
console.log(error);
});

---

返回值效果：如下图

【四】布局总结：

vue 2
1、npm 安装ElementUI
npm cache clean --force
先安装
cnpm install element-ui
再安装
cnpm install element-plus --save
或用 yarn 安装 ，我使用yarn 安装这两个是成功的 ， yarn add element-ui
yarn add element-plus
学习vue3踩坑分享（ 1 ）- 使用Element Plus ＜script lang=“ts“ setup＞ 加上lang=“ts“后编译错误
https://blog.csdn.net/qq_61672548/article/details/125506231

1. 配置vue.config.js 添加下面的代码

configureWebpack: {
resolve: { extensions: [".ts", “.tsx”, “.js”, “.json”] },
module: {
rules: [
{
test: /.tsx?KaTeX parse error: Can't use function '\.' in math mode at position 143: …dTsSuffixTo: [/\̲.̲vue/],
}
}
]
}
}

2. 新建tsconfig.json放在项目根目录

{
“compilerOptions”: {
“target”: “es5”,
“module”: “commonjs”,
“strict”: true,
“strictNullChecks”: true,
“esModuleInterop”: true,
“experimentalDecorators”: true
}
}

3.  在src根目录下新建vue-shim.d.ts   这个文件可以让vue识别ts文件（不加会报错）
declare module “*.vue” {    import Vue from “vue”;    export default Vue;}  
小白使用element plus的时候，将官网代码直接复制到编译器出现错误，检查问题之后发现，问题出在这里

2、在main.js里面导入ElementUI 
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;

Vue.use(ElementUI);

vue3 引入##############
https://www.cnblogs.com/magic-world/p/16352543.html
1、在国内下载时网络会出问题,建议淘宝镜像下载，配置镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org
2、用cnpm安装vue脚手架：cnpm i -g @vue/cli（其中i是Install安装的简写，g是global全局的简写）。

创建vue项目
1、使用脚手架创建vue项目:vue create test(test为项目名)
2、选择第三项自定义添加：

Default([Vue 3] babel, eslint):vue3的项目，只包含js编译器babel，代码检测工具eslint。
Default([Vue 2] babel, eslint):vue2的项目，只包含js编译器babel，代码检测工具eslint。
Manually select features:自定义添加选择功能。
3、选择配置,一般项目勾选下图选项即可：

import { createApp } from ‘vue’
import App from ‘./App.vue’

##import router from ‘./routes’

import ElementPlus from ‘element-plus’
import ‘element-plus/dist/index.css’

// import ElementUI from ‘element-ui’
// import ‘element-ui/lib/theme-chalk/index.css’;

const app = createApp(App)
app.use(router)
app.use(ElementPlus)
app.config.productionTip = false
app.mount(’#app’)

###关闭
开发环境下每次保存代码时都默认启用 eslint验证

解决办法：关闭默认启用

在vue.config.js文件中添加一段代码：

lintOnSave: false

vue3 安装
因为element-ui不适配vue3，官方已将vue3版本的更新为element-plus

Element-ui适用于Vue2框架

Element-plus适用于Vue3框架

我们只需要执行npm i element-plus 命令安装element-plus即可
3、在components目录中创建 .vue 文件，通过element-ui网站快速创建页面，（table页面）

【五】CSS

【五】页面跳转总结：
【六】语法总结 ：
【七】模板总结：

-----demo

•  <el-button @click=“submitFormn({{tab.index}})”> 元素:{{tab}} 索引:{{tab.index}}    
•  
  
  
  9