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

  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/],

}

}

]

}

}

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

{

"compilerOptions": {

"target": "es5",

"module": "commonjs",

"strict": true,

"strictNullChecks": true,

"esModuleInterop": true,

"experimentalDecorators": true

}

}

  1. 在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

相关推荐
weixin_470740367 分钟前
某算法的python执行汇编
汇编·python·算法
mit6.8242 小时前
[RestGPT] docs | RestBench评估 | 配置与环境
人工智能·python
Ice__Cai4 小时前
Flask 之 Cookie & Session 详解:用户状态管理
后端·python·flask·cookie·session
省四收割者4 小时前
Go语言入门(10)-数组
数据结构·经验分享·笔记·vscode·算法·golang
WSSWWWSSW5 小时前
Seaborn数据可视化实战:Seaborn时间序列可视化入门
python·信息可视化·数据分析·matplotlib·seaborn
云天徽上6 小时前
【数据可视化-96】使用 Pyecharts 绘制主题河流图(ThemeRiver):步骤与数据组织形式
开发语言·python·信息可视化·数据分析·pyecharts
codeyanwu6 小时前
nanoGPT 部署
python·深度学习·机器学习
quaer7 小时前
print(2 ** 3)
开发语言·python
Loving_enjoy7 小时前
智能合约漏洞检测技术综述:守护区块链世界的“自动售货机”
经验分享·机器学习·课程设计·facebook
翔云1234567 小时前
Python 中 SQLAlchemy 和 MySQLdb 的关系
数据库·python·mysql