vite+vue3+element-plus项目搭建的方法步骤

因为vue3出了一段时间了，element也出了基于vue3.x版本的element-plus，vite打包听说很快，尝试一下，感兴趣的可以了解一下

使用vite搭建vue3项目

通过在终端中运行以下命令，可以使用 Vite 快速构建 Vue 项目。

 $ npm init vite-app  $ cd  $ npm install $ npm run dev

引入Element Plus

安装Element Plus:

 npm install element-plus --save

main.js中完整引入 Element Plus：

 import { createApp } from 'vue' import ElementPlus from 'element-plus'; import 'element-plus/lib/theme-chalk/index.css'; import App from './App.vue'; const app = createApp(App) app.use(ElementPlus) app.mount('#app')

引入SCSS

执行命令安装sass， npm i sass -D，然后在vue文件的style标签下加入lang=”scss”即可，这些与以前vue2都是一样的。

 npm i sass -D

引入eslint

安装eslint

 npm i eslint -D

使用eslint对本项目进行初始化

 npx eslint --init

按照提示进行设置，这是我选择的设置

引入vue-router

安装Vue Router 4

 npm install vue-router@4

在src目录下新建router文件夹，并在router下新建index.js进行路由配置

 import * as VueRouter from 'vue-router' const routes = [ { path: '/', component: () => import('../page/Home.vue') }, { path: '/login', component: () => import('../page/Login.vue') } ] export default VueRouter.createRouter({ history: VueRouter.createWebHashHistory(), routes })

在main.js下使用该中间件

 import router from './router' //... app.use(router)

引入vuex

安装vuex

 npm install vuex@next --save

在src下创建store路径，并在store下创建index.js

 import { createStore } from 'vuex' export default createStore({ state () { return { username: '' } }, mutations: { setUserName (state, payload) { state.username = payload } } })

在main.js下使用store

 import vuex from './store' //... app.use(vuex)

引入axios

对于网络请求，这里使用axios，首先安装axios

 npm i axios

在src目录下创建api目录，并在api路径下创建axios.本文来源gao@!dai!ma.com搞$$代^@码!网js，配置axios实例

 // axios.js import axios from 'axios' // import config from '../../config' import { useRouter } from 'vue-router' export default function () { // 1. 发送请求的时候，如果有token，需要附带到请求头中 const token = localStorage.getItem('token') let instance = axios if (token) { instance = axios.create({ // baseURL: config.server, headers: { authorization: 'Bearer ' + token } }) } const router = useRouter() instance.interceptors.response.use( (resp) => { // 2. 响应的时候，如果有token，保存token到本地（localstorage） if (resp.data.data.token) { localStorage.setItem('token', resp.data.data.token) } // 3. 响应的时候，如果响应的消息码是403（没有token，token失效），在本地删除token if (resp.data.code === 403) { localStorage.removeItem('token') localStorage.removeItem('username') router.push({ name: 'Login' }) } return resp }, (err) => { return Promise.reject(err) } ) return instance }

在api路径下创建index.js编写api

 import request from './axios.js' import config from '../../config' export default { // 登录 login (params) { return request().post(`${config.server}/login`, params) }, // 获取用户列表 getUserList (params) { return request().get(`${config.server}/user/list`, { params: params }) }, // 添加一个用户 createUser (params) { return request().post(`${config.server}/user/`, params) }, //...

接下来使用vue3的composition api进行组件的开发，这里列举一个User模块的开发:

  <div class="user-wrap"> 新增用户 +      编辑删除      <span class="dialog-footer"> 取 消确 定</span></div> .user-wrap{ width: 100%; min-width: 500px; .create-btn{ margin-bottom: 10px; display: flex; justify-content: flex-end; } .page-wrap{ margin-top: 10px; } }

以上就是vite+vue3+element-plus项目搭建的方法步骤的详细内容，更多请关注gaodaima搞代码网其它相关文章！

搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]‍，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vite+vue3+element-plus项目搭建的方法步骤