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