vue 开发总结：从安装到第一个交互页面-与数据库API
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
- 配置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/],
}
}
]
}
}
- 新建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