vite+vue3+vuex+element-plus项目搭建基础

npm create vite创建项目
cd 项目路径,进入项目
npm install下载依赖
npm run dev启动项目

main.js是入口文件,所有的执行必须经过main.js
app.vue根组件实例,挂载在index.html上

每一个.vue组件都有三个顶层,template、script、style
每一个组件中的变量,类名都是互不影响的,所以可以重复使用

npm i axios下载axios请求工具
src下创建service文件夹,axios.js文件
封装axios

import axios from 'axios'

import store from '@/store/index.js'

//设置不同开发环境路径
if (process.env.NODE_ENV == 'development') {//开发环境下,默认地址
  axios.defaults.baseURL = 'http://ludir.cn:8888/api/private/v1/'
} else if (process.env.NODE_ENV == 'debug') {//测试环境下,默认地址
  axios.defaults.baseURL = 'https://www.ceshi.com'
} else if (process.env.NODE_ENV == 'production') {//线上环境下,默认地址
  axios.defaults.baseURL = 'https://www.production.com'
}

//设置请求超时时间
axios.defaults.timeout = 5000
//设置post请求响应头
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-from-urlencoded;charset=UTF-8';

//添加请求拦截器
axios.interceptors.request.use(function (config) {
  //获取token
  let myToken = store.state.token
  //如果存在token,设置进响应头,Authorization是后端给的字段
  if(myToken){
    config.headers['Authorization']=myToken
  }
  
  return config //这里必须return
}, function (error) {
  //对错误做处理
  return Promise.reject(error);
})

//添加响应拦截器
axios.interceptors.response.use(function (res) {
  //响应成功时,处理
  return res.data
}, function (error) {
  //状态码超出200的就会触发这里的函数
  return Promise.reject(error)
})

//封装get,post.delete.put请求并导出
export const get = (url, params) => {
  return new Promise((resolve, reject) => {
    axios.get(url, { params }).then(res => resolve(res)).catch(err => reject(err.data))
  })
}

export const post = (url, params) => {
  return new Promise((resolve, reject) => {
    axios.post(url, params).then(res => resolve(res)).catch(err => reject(err.data))
  })
}
export const deletes = (url, params)=>{
  return new Promise((resolve, reject) => {
    axios.delete(url, {params}).then(res => resolve(res)).catch(err => reject(err.data))
  })
}
export const put = (url, params)=>{
  return new Promise((resolve, reject) => {
    axios.put(url, params).then(res => resolve(res)).catch(err => reject(err.data))
  })
}



export default axios

src下创建api文件夹,这里放各页面的接口文件
下载一个重置默认样式的文件 npm i normalize
安装组件框架,这里用element-plus
安装路由,npm i vue-router
main.js中配置

import { createApp } from 'vue'

import App from './App.vue'
import router from './router/router'

import 'normalize.css'//引入一个重置默认样式的css

import 'element-plus/dist/index.css'//引入element-plus样式
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'//中文显示,比如分页功能的英文改成中文
createApp(App).use(router).use(store).use(ElementPlus,{locale: zhCn}).mount('#app')

安装element按需引入的插件,npm install -D unplugin-vue-components unplugin-auto-import
在vite.config.js中配置element按需引入,和@路径别名

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import path from 'path'

//配置element
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),],
  //配置路径别名
  resolve:{
    alias:{
      '@':path.resolve(__dirname,'./src')
    }
  }
})

安装vuex,npm i vuex
src下创建一个store文件夹,index.js文件
配置vuex

import { createStore } from 'vuex'
//这个插件用于自动把state数据存储到localStorage,需要先npm安装
import createPersistedState from 'vuex-persistedstate'

const store = createStore({
  state: {
    token: '',
    username:'',
  },
  mutations: {
    
  },
  actions: {

  },
  getters: {},
  //设置自动存储localStorage
  plugins: [createPersistedState({
    storage: window.localStorage
  })]
})

export default store

在main.js中引入router

import router from './router/router'

.use(router)

在App.vue中放一个路由占位符

<router-view></router-view>

配置路由
src创建一个router文件夹,router.js文件

import { createRouter, createWebHashHistory} from 'vue-router'
import Login from '@/layout/login/login.vue'

const router = createRouter({
  history:createWebHashHistory(),
  routes:[
    {
      path:'/login',
      name:'login',
      component:Login
    }    
  ]
})

//导航守卫
router.beforeEach((to, from, next) => {
  let data = JSON.parse(window.localStorage.getItem('vuex'))
  if (data && data.token) {
    next()
  } else {
    if (to.path != '/login') {
      next('/login')
    } else {
      next()
    }
  }
})

export default router

src下创建views文件夹,这里就放主要的页面,写一个login页
到这里就差不多创建完项目了,剩下的就是写页面,写方法,写api请求,调接口
下面是项目整体文件夹的基本规范描述,以上没提到的可以后面边写边加,基本上所有的操作都在src目录下进行了
在这里插入图片描述

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
创建 Vite + Vue3 + Element Plus 项目的步骤如下: 1. 确保已经安装了 Node.js 和 npm。 2. 打开终端或命令行工具,创建一个新的项目文件夹,并进入该文件夹。 3. 执行以下命令初始化一个新的 Vue 项目: ``` npm init @vitejs/app ``` 4. 在初始化过程中,你会被要求选择一个模板。选择 Vue 3 并按回车键确认。 5. 完成初始化后,进入项目文件夹,并安装 Element Plus: ``` cd your-project-name npm install element-plus ``` 6. 创建一个新的 Vue 组件,例如 `HelloWorld.vue`,并在其中引入 Element Plus 组件: ```vue <template> <div> <el-button type="primary">Hello World</el-button> </div> </template> <script> import { ElButton } from 'element-plus'; export default { components: { ElButton } } </script> ``` 7. 在 `main.js` 中引入 Element Plus 的样式和组件库: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import 'element-plus/dist/index.css'; createApp(App).mount('#app'); ``` 8. 在 `App.vue` 中使用你刚刚创建的组件: ```vue <template> <div id="app"> <HelloWorld /> </div> </template> <script> import HelloWorld from './components/HelloWorld.vue'; export default { components: { HelloWorld } } </script> ``` 9. 运行以下命令启动开发服务器: ``` npm run dev ``` 10. 打开浏览器,在地址栏中输入 `http://localhost:3000`,即可看到运行中的 Vite + Vue3 + Element Plus 项目。 这样,你就成功创建了一个 Vite + Vue3 + Element Plus 项目。你可以根据自己的需求继续开发和定制化。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值