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);

});

返回值效果：如下图

【四】布局总结：

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

}

在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}}