从零开始创建vue3项目——包罗项目初始化、element-plus、eslint、axios、r ...

项目启动

初始化vue3项目

• 这里建议先下载pnpm，下载速率更快，假如还没下载可以使用
  npm install -g pnpm
  假如碰到报错题目，如下
  
  
  
  

可以在命令行输入下面的指令以切换到淘宝镜像源
npm config set registry https://registry.npm.taobao.org

• 创建项目
  命令行输入pnpm create vue
  

根据自己的需要选择安装插件即可

• 试运行
  命令行中也有提示，输入
  

1. cd vue-demo
2. pnpm install
3. pnpm dev

复制代码

即可运行项目

页面中的都是vue官网链接以及一些提示，感爱好的可以自己看看
设置Element-plus

ement-plus官网链接

• 导入有完整导入和按需导入两种，推荐使用按需导致，镌汰代码包的大小
  首先安装element-plus
  pnpm install element-plus
  使用按需导入需额外下载插件
  pnpm install -D unplugin-vue-components unplugin-auto-import
  
• 然后修改vite.config.js文件，导入插件
  

1. // vite.config.js
2. import { defineConfig } from 'vite'
3. import AutoImport from 'unplugin-auto-import/vite'
4. import Components from 'unplugin-vue-components/vite'
5. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
7. export default defineConfig({
8.   // ...
9.   plugins: [
10.     // ...
11.     AutoImport({
12.       resolvers: [ElementPlusResolver()],
13.     }),
14.     Components({
15.       resolvers: [ElementPlusResolver()],
16.     }),
17.   ],
18. })

复制代码

• 由于element-plus默认是英文，如需修改成中文可以如下操作
  

1. <script setup>
2. import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
3. </script>
5. <template>
6.   <!-- App.vue只需要留一个路由出口 -->
7.   <el-config-provider :locale="zhCn">
8.     <router-view></router-view>
9.   </el-config-provider>
10. </template>

复制代码

设置eslint

• 刚才初始化vue项目的时候可选设置eslint，假如没有选的在命令行输入
  pnpm install eslint
  
• 下载成功后会在目次中看到 .eslint.cjs 文件，打开文件修改此中内容如下，此中内容也都可以自己按需求更改
  

1. /* eslint-env node */
2. require('@rushstack/eslint-patch/modern-module-resolution')
4. module.exports = {
5.   root: true,
6.   extends: [
7.     'plugin:vue/vue3-essential',
8.     'eslint:recommended',
9.     '@vue/eslint-config-prettier/skip-formatting'
10.   ],
11.   parserOptions: {
12.     ecmaVersion: 'latest'
13.   },
14.   rules: {
15.     //禁用格式化插件 format on save关闭
16.     //安装Eslint 并配置保存时自动修复
17.     'prettier/prettier': [
18.       'warn',
19.       {
20.         singleQuote: true, // 单引号
21.         semi: false, // 无分号
22.         printWidth: 80, // 每行宽度至多80字符
23.         trailingComma: 'none', // 不加对象|数组最后逗号
24.         endOfLine: 'auto' // 换行符号不限制（win mac 不一致）
25.       }
26.     ],
27.     'vue/multi-word-component-names': [
28.       'warn',
29.       {
30.         ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）
31.       }
32.     ],
33.     'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验
34.     'no-undef': 'error'
35.   },
36.   globals: {
37.     ElMessage: 'readonly',
38.     ElMessageBox: 'readonly',
39.     ElLoading: 'readonly'
40.   }
41. }

复制代码

设置axios

• 安装axios
  pnpm install axios
  
• 建议在src目次中新建utils文件夹，此中新建request.js文件
  进行如下设置
  

1. import axios from 'axios'
3. //请求基地址
4. const baseURL = ''
6. const instance = axios.create({
7.   // TODO 1. 基础地址，超时时间
8.   baseURL,
9.   timeout: 1000000
10. })
12. //响应拦截器
13. instance.interceptors.response.use(
14.   (res) => {
15.     // TODO 3. 处理业务失败
16.     // TODO 4. 摘取核心响应数据
17.     if (res.data.code === 0) {
18.       return res
19.     }
20.     //处理业务失败，给错误提示
21.     ElMessage.error(res.data.message || '服务异常')
22.     return Promise.reject(res.data)
23.   },
24.   (err) => {
25.     //错误默认情况 => 只给提示就行
26.     ElMessage.error(err.response.data.message || '服务异常')
27.     return Promise.reject(err)
28.   }
29. )
31. export default instance
32. export { baseURL }

复制代码

• 请求基地址和拦截器一定要根据后端实际的接口进行修改哦！
  

设置router

• 同样的，初始化项目时也可选router，没有选的话命令行输入
  pnpm install router
  
• 建议在src目次中新建router文件夹，此中新建index.js文件
  
• 根据自己实际的目次结构设置哦！
  

1. import { createRouter, createWebHistory } from 'vue-router'
2. //createRoute用于创建路由示例
3. //配置history模式
4. //1. createWebHistory  地址栏不带#
5. //2. createWebHashHistory   地址栏带#
6. const router = createRouter({
7.   history: createWebHistory(import.meta.env.BASE_URL),
8.   routes: [
9.     {
10.       path: '/',
11.       component: () => import('@/views/layout/LayoutContainer.vue'),
12.       // 默认跳转
13.       redirect: '/index/UserManagement',
14.       children: [
15.         {
16.           path: '/index/UserManagement',
17.           component: () => import('@/views/index/UserManagement.vue')
18.         }
19.       ]
20.     }
21.   ]
22. })
24. export default router

复制代码

设置pinia

• 同样的，初始化项目时没有选择pinia的命令行输入
  pnpm install pinia
  
• 建议在src目次中新建stores文件夹，此中新建index.js文件，再在stores中新建modules文件夹，此中新建user.js文件，在index.js中导出pinia实例
  
• index.js进行如下设置，这样设置之后，页面中使用pinia就可以直接在页面中导入这个index.js文件，更加方便
  

1. import { createPinia } from 'pinia'
2. import persist from 'pinia-plugin-persistedstate'
4. const pinia = createPinia()
5. pinia.use(persist)
7. export default pinia
9. export * from './modules/user'

复制代码

• user.js中文件进行如下设置
  

1. import { defineStore } from 'pinia'
2. import { ref } from 'vue'
4. //本案例为用户模块，可以自己根据需要更改，demoname也根据实际修改
5. export const useUserStore = defineStore(
6.   'demoname',
7.   () => {
8.     //自定义属性名
9.     const token = ref('')
10.     //自定义方法
11.     const setToken = (newToken) => {
12.       token.value = newToken
13.     }
14.     const removeToken = () => {
15.       token.value = ''
16.     }
17.     //记得return暴露自定义的属性和方法
18.     return {
19.       token,
20.       setToken,
21.       removeToken
22.     }
23.   },
24.   //持久化
25.   {
26.     persist: true
27.   }
28. )

复制代码

设置 echarts

echarts官网

• 命令行输入，echarts就无法在项目初始化的时候直接设置了，需要手动设置
  pnpm install echarts
  
• 在main.js中进行设置，即可全局挂载echarts
  

1. import './assets/main.scss'
3. import { createApp } from 'vue'
4. import { createPinia } from 'pinia'
6. import App from './App.vue'
7. import router from './router'
9. import ECharts from 'vue-echarts' // 全局引入ECharts
10. import 'echarts' // 全局引入echarts
11. // 挂载ECharts   参数1:vue文件中挂载echarts的名字  参数2:挂载的组件
13. const app = createApp(App)
15. app.use(createPinia())
16. app.use(router)
17. //echarts
18. app.component('ECharts', ECharts)
20. app.mount('#app')

复制代码

• 假如要实现简朴的echarts图表，还是前往官网查看
  

共勉

有不会的多去官网查找看看，大家一起加油学习吧！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。