一.首先你要有node.js环境(没有的话请去b站找教程)
二.打开你要建立文件的位置,我使用的是vscode。
在这里,打开终端运行
npm create vue@latest
完成以下选择:
三.在新建的文件中把components底下的文件删除
四.找到App.vue,删除底下的代码,变成如下图:
五.打开element-plus官网:翻译 | Element Plusa Vue 3 based component library for designers and developershttps://element-plus.org/zh-CN/guide/translation.html
找到安装教程,如下:
npm install element-plus --save
复制出npm这一列的代码,在终端运行:
然后打开element-plus官网,找到“快速开始”:
按照上述官网内容进行main.js的更改:
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
app.use(ElementPlus)
六.打开windi-css官网:Vite 集成 | Windi CSS下一代工具类 CSS 框架https://cn.windicss.org/integrations/vite.html
安装教程选择vite:
npm i -D vite-plugin-windicss windicss
按照这里的教程更改vite.config.js:
import WindiCSS from 'vite-plugin-windicss'
export default {
plugins: [
WindiCSS(),
],
}
更改main.js如下:
import 'virtual:windi.css'
七.打开vue router官网:入门 | Vue RouterVue.js 的官方路由https://router.vuejs.org/zh/guide/
安装教程如下:
cnpm install vue-router@4
在终端运行如下代码:
然后就不安装教程走了。
在你的项目文件中,src文件夹下,新建一个router文件,再在router文件夹下新建一个index.js文件。
在index.js文件中写如下代码:
import {
createRouter as _createRouter,
createWebHashHistory,
} from 'vue-router'
// import index from "~/pages/index.vue"
const routes = [
]
//这里有错误,不知道什么原因只能使用函数返回,直接定义会报错
function createRouter() {
return _createRouter({
history: createWebHashHistory(),
routes
})
}
const router = createRouter()
export default router
在main.js下写如下代码:
到这里就完成了一个vue项目的基本创建。这些在项目中是最基本的。
main.js代码:
import './assets/main.css'
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'
import 'virtual:windi.css'
const app = createApp(App)
import router from './router'
app.use(router)
app.use(ElementPlus)
app.mount('#app')
vite.config.js代码:
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import WindiCSS from 'vite-plugin-windicss'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
WindiCSS(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
router/index.js代码:
import {
createRouter as _createRouter,
createWebHashHistory,
} from 'vue-router'
// import index from "~/pages/index.vue"
const routes = [
]
//这里有错误,不知道什么原因只能使用函数返回,直接定义会报错
function createRouter() {
return _createRouter({
history: createWebHashHistory(),
routes
})
}
const router = createRouter()
export default router
八 .打开axios官网axios中文网|axios API 中文文档 | axiosAxios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。http://www.axios-js.com/
安装axios:
cnpm install axios
然后在src文件夹下,新建一个axios.js用于存放请求响应的地址
在aixos.js里写如下代码:
import axios from 'axios'
const server = axios.create({
baseURL:"http://127.0.0.1"//本地域名
})
export default server;
九.打开element-plus的icon官网
cnpm install @element-plus/icons-vue
在main.ts中引用
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}