vue3+elementplus+axios+router的入门项目总结

一、使用vite方式创建项目：
1、创建空文件夹，用vscode打开空文件夹，终端上运行如下命令

$ npm init vite-app [项目名]：初始化项目
$ cd [项目名]：进入项目
$ npm install：安装项目依赖
$ npm run dev：启动项目

2、启动项目后会出现访问地址：

 3、进入访问地址：

 

二、引入elementpuls

1、安装插件

$ npm install element-plus --save

2、更改main.js文件

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import ElementPlus from 'element-plus' //引用
import 'element-plus/dist/index.css'  //引用
const app = createApp(App)
app.use(ElementPlus)  //使用
app.mount('#app')

3、引入表单组件，并更改成自己需要的内容：（组件地址：https://element.eleme.io/#/zh-CN/component/installation）

<template>
    <h1>{{ msg }}</h1>
<el-form ref="form" :model="form" label-width="80px">
    
   
    <el-form-item label="环境">
      <el-select v-model="form.env" placeholder="请选择环境">
        
        <el-option label="sit" value="sit"></el-option>
        <el-option label="uat" value="uat"></el-option>
        <el-option label="dev" value="dev"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="订单类型">
      <el-select v-model="form.ordertype" placeholder="请选择订单类型">
        <el-option label="订单" value="order"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="手机号">
      <el-input v-model="form.phone"></el-input>
    </el-form-item>
    <el-form-item label="订单号">
      <el-input v-model="form.orderid"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">立即创建</el-button>
      <!-- <el-button>取消</el-button> -->
    </el-form-item>
    <span style="color: red" >{{form.msgs}}</span>
  </el-form>
  <!-- <div ><span style="color: red" id="info" ></span></div> -->

</template>

如下：：引入组件要重新运行npm run dev

 

三、引入路由：
1、先安装路由：

npm install vue-router

 

2、建立路由文件：

```
import {createRouter, createWebHistory} from "vue-router";
import HelloWorld from './components/HelloWorld.vue'
import Form from './components/Form.vue'
import Menu from './components/menu.vue'
import Cardnum from './components/cn.vue'

// 路由配置
const routes = [
{
//斜杠重定向到首页
path: "/",
redirect: "/index",
},
{
//首页
path: "/index",
name: "index",
component: Form,
},
{
//内容页
path: "/content",
name: "HelloWorld",
component: Cardnum,
},

]

// 路由对象
const router = createRouter({
history: createWebHistory(),
routes: routes,
})

export default router // 导出供其他组件导入
```

 

3、mian.js中引入路由组件，并使用

```
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from "./router" // 导入路由

const app = createApp(App)
app.use(ElementPlus)
app.use(router) //使用路由
app.mount('#app')
```

 

4、再到入口组件中

```
<div>
<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
<el-menu-item index="1"><router-link to="/index">测试订单删除</router-link></el-menu-item>
<el-menu-item index="2"><router-link to="/content">号码生成</router-link></el-menu-item>
</el-menu>
<router-view></router-view>
</div>
```

 

四、将生成银行卡身份证的HTML文件转化为vue组件，实现路由配置：
1、 只需将入口函数放入export default中即可，
2、另外将全局参数放入export default data中定义，通过v-model实现双向数据绑定
具体可看代码实现

五、代码目录：

 

六、最终效果：

 

 

代码地址：

链接：https://pan.baidu.com/s/1x9o0kq2zdChoSDKfkbVhbA
提取码：z0p9