从零开始创建vue3项目——包罗项目初始化、element-plus、eslint、axios、r
项目启动初始化vue3项目
[*]这里建议先下载pnpm，下载速率更快，假如还没下载可以使用
npm install -g pnpm
假如碰到报错题目，如下
https://i-blog.csdnimg.cn/direct/aa94ea1cdd6c44a2b2493eb2d050f1bc.png
可以在命令行输入下面的指令以切换到淘宝镜像源
npm config set registry https://registry.npm.taobao.org
[*]创建项目
命令行输入pnpm create vue
根据自己的需要选择安装插件即可
https://i-blog.csdnimg.cn/direct/fa4d062e2f1e4c6a96ac8ea707108d1c.png
[*]试运行
命令行中也有提示，输入
cd vue-demo
pnpm install
pnpm dev
即可运行项目
https://i-blog.csdnimg.cn/direct/d43b7a747bf94236b1889a6edcf9868a.png
页面中的都是vue官网链接以及一些提示，感爱好的可以自己看看
设置Element-plus
ement-plus官网链接
[*] 导入有完整导入和按需导入两种，推荐使用按需导致，镌汰代码包的大小
首先安装element-plus
pnpm install element-plus
使用按需导入需额外下载插件
pnpm install -D unplugin-vue-components unplugin-auto-import
[*] 然后修改vite.config.js文件，导入插件
// vite.config.js
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
// ...
plugins: [
// ...
AutoImport({
resolvers: ,
}),
Components({
resolvers: ,
}),
],
})
[*]由于element-plus默认是英文，如需修改成中文可以如下操作
<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
</script>
<template>
<!-- App.vue只需要留一个路由出口 -->
<el-config-provider :locale="zhCn">
<router-view></router-view>
</el-config-provider>
</template>
设置eslint
[*] 刚才初始化vue项目的时候可选设置eslint，假如没有选的在命令行输入
pnpm install eslint
[*] 下载成功后会在目次中看到 .eslint.cjs 文件，打开文件修改此中内容如下，此中内容也都可以自己按需求更改
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-prettier/skip-formatting'
],
parserOptions: {
ecmaVersion: 'latest'
},
rules: {
//禁用格式化插件 format on save关闭
//安装Eslint 并配置保存时自动修复
'prettier/prettier': [
'warn',
{
singleQuote: true, // 单引号
semi: false, // 无分号
printWidth: 80, // 每行宽度至多80字符
trailingComma: 'none', // 不加对象|数组最后逗号
endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
}
],
'vue/multi-word-component-names': [
'warn',
{
ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
}
],
'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
'no-undef': 'error'
},
globals: {
ElMessage: 'readonly',
ElMessageBox: 'readonly',
ElLoading: 'readonly'
}
}
设置axios
[*] 安装axios
pnpm install axios
[*] 建议在src目次中新建utils文件夹，此中新建request.js文件
进行如下设置
import axios from 'axios'
//请求基地址
const baseURL = ''
const instance = axios.create({
// TODO 1. 基础地址，超时时间
baseURL,
timeout: 1000000
})
//响应拦截器
instance.interceptors.response.use(
(res) => {
// TODO 3. 处理业务失败
// TODO 4. 摘取核心响应数据
if (res.data.code === 0) {
return res
}
//处理业务失败，给错误提示
ElMessage.error(res.data.message || '服务异常')
return Promise.reject(res.data)
},
(err) => {
//错误默认情况 => 只给提示就行
ElMessage.error(err.response.data.message || '服务异常')
return Promise.reject(err)
}
)
export default instance
export { baseURL }
[*]请求基地址和拦截器一定要根据后端实际的接口进行修改哦！
设置router
[*] 同样的，初始化项目时也可选router，没有选的话命令行输入
pnpm install router
[*] 建议在src目次中新建router文件夹，此中新建index.js文件
[*] 根据自己实际的目次结构设置哦！
import { createRouter, createWebHistory } from 'vue-router'
//createRoute用于创建路由示例
//配置history模式
//1. createWebHistory地址栏不带#
//2. createWebHashHistory 地址栏带#
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
component: () => import('@/views/layout/LayoutContainer.vue'),
// 默认跳转
redirect: '/index/UserManagement',
children: [
{
path: '/index/UserManagement',
component: () => import('@/views/index/UserManagement.vue')
}
]
}
]
})
export default router
设置pinia
[*] 同样的，初始化项目时没有选择pinia的命令行输入
pnpm install pinia
[*] 建议在src目次中新建stores文件夹，此中新建index.js文件，再在stores中新建modules文件夹，此中新建user.js文件，在index.js中导出pinia实例
[*] index.js进行如下设置，这样设置之后，页面中使用pinia就可以直接在页面中导入这个index.js文件，更加方便
import { createPinia } from 'pinia'
import persist from 'pinia-plugin-persistedstate'
const pinia = createPinia()
pinia.use(persist)
export default pinia
export * from './modules/user'
[*]user.js中文件进行如下设置
import { defineStore } from 'pinia'
import { ref } from 'vue'
//本案例为用户模块，可以自己根据需要更改，demoname也根据实际修改
export const useUserStore = defineStore(
'demoname',
() => {
//自定义属性名
const token = ref('')
//自定义方法
const setToken = (newToken) => {
token.value = newToken
}
const removeToken = () => {
token.value = ''
}
//记得return暴露自定义的属性和方法
return {
token,
setToken,
removeToken
}
},
//持久化
{
persist: true
}
)
设置 echarts
echarts官网
[*] 命令行输入，echarts就无法在项目初始化的时候直接设置了，需要手动设置
pnpm install echarts
[*] 在main.js中进行设置，即可全局挂载echarts
import './assets/main.scss'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import ECharts from 'vue-echarts' // 全局引入ECharts
import 'echarts' // 全局引入echarts
// 挂载ECharts 参数1:vue文件中挂载echarts的名字参数2:挂载的组件
const app = createApp(App)
app.use(createPinia())
app.use(router)
//echarts
app.component('ECharts', ECharts)
app.mount('#app')
[*]假如要实现简朴的echarts图表，还是前往官网查看
共勉
有不会的多去官网查找看看，大家一起加油学习吧！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]