vue前端|vite + vue3 + element-plus + axios + vueRouter + vuex + scss 搭建项目 elementui|vue

vite + vue3 + element-plus + axios + vueRouter + vuex + scss 搭建项目准备工作 【vue前端|vite + vue3 + element-plus + axios + vueRouter + vuex + scss 搭建项目】1.先搭建一个vue工程，这里有两种办法，一种是使用vue-cli ,另一种是使用vite(一种新的构建工具)，具体搭建传送门
2.搭建好项目后，我们就可以安装对应的库了，这里需要安装以下的这些库：

npm install --save axios 这个库不需要说使用next版本，vue升级和发起http请求没有直接的关系，所以axios不用说要不要升级安装 axios官网
npm install element-plus --save 这个库是element 团队针对vue3而专门开发的库，对于vue3的库，除了elment-plus外，还有ant-design 等 element-plus 官网
npm install vue-router@4 这个是vue router 专门的库,现在还是带测试的版本，但是如果需要在vue3中使用路由，那么需要使用这个库，官网
npm install sass -D 这个是sass 的库，这里为啥不需要安装sass--loader 或者 style-loader 或者 node-sass 呢？这个在设计的时候，vue3 的缔造者在设计vue 的时候已经考虑过这件事情，vite 这个构建工具里面集成了scss, less ,stylus 等，原话如下 That said, Vite does provide built-in support for .scss, .sass, .less, .styl and .stylus files. There is no need to install Vite-specific plugins for them, but the corresponding pre-processor itself must be installed as a peer dependency: vite 的官网
npm install vuex@next --save 这个是vuex的库，如果需要使用则需要安装这个库， vuex官网

最后我的package.json 的情况如下：

vue前端|vite + vue3 + element-plus + axios + vueRouter + vuex + scss 搭建项目

文章图片

项目编写在项目编写阶段，由于本人现在也是在体验vue3的阶段，下面可能也会有理解错误的地方，还请大家多多指教
配置vue的环境

直接在根目录建立vite.config.js，里面的常用配置如下：

const path = require('path') export default function () { return { // 代理，最重要，其他的都可以有默认配置 proxy: { '/api': { target: 'http://localhost:9011', changeOrigin: true, } }, // 入口 entry: 'index.html', // 出口 outDir: './../public/html', // 打包后的跟路径 base: '/', // 输出的静态资源的文件夹名称 assetsDir: 'assets', // 是否开启ssr服务断渲染 ssr: false, // 重命名路径path.resolve(__dirname, './src') alias: { '/@/': path.resolve(__dirname, './src') }, // 端口 port: 3002, // 是否自动开启浏览器 open: false, // 开启控制台输出日志 silent: false, // 那个包不需要打包 optimizeDeps: { exclude: ['element-plus'] }, // css预设的配置 cssPreprocessOptions: { scss: { additionalData: '@import "style/var.scss"; ', // 添加公共样式 }, } } }

详细配置
起步的main.js

创建一个vue的实例，导入element-plus, 导入vue-router,
或者vuex，但是这里都需要通过createApp链式调用来使用插件

import {createApp} from 'vue' import App from './App.vue' import ElementPlus from 'element-plus'; import '../style/index.scss'; import 'element-plus/lib/theme-chalk/index.css'; import router from "./router"; import vuex from "./vuex"; createApp(App).use(router).use(ElementPlus).use(vuex).mount('#app')

创建路由

在src文件夹下面创建router文件夹，里面配置vue的路由

import {createRouter, createWebHistory} from 'vue-router'; import {routes} from "./routes"; const router = createRouter({ history: createWebHistory(), // 路由的history模式 routes, // 导入路由的配置，和vue2里面的路由一样 })export default router; //注意：在.vue组件中如果需要使用router,则需要导入useRouter这个方法，需要使用route,则需要导入，useRoute这个方法

是否需要状态管理工具

如果需要使用状态管理工具，那个在src下面创建一个store文件夹，然后里面写vuex的配置，我这里使用的是模块，模块里面的内容和vuex3是一样的，调用方式也是一样的

import {createStore} from 'vuex' import userModule from "./userModule"; export default createStore({ modules: { userModule: userModule, } }) //模块例子 export default { namespaced: true, state: { isLoading: false, data: null, }, mutations: { // 设置是否正在加载 setIsLoading(state, payload) { state.isLoading = payload; }, // 设置用户数据 setData(state, payload) { state.data = https://www.it610.com/article/payload } }, actions: { // 登录 async login({commit}, {loginId, loginPwd}) { commit('setIsLoading', true); const r = await login(loginId, loginPwd) commit('setData', r); commit('setIsLoading', false); return r; },} } // 注意：如果在.vue组件中需要使用store,需要导入 userStore的这个方法// 例如：在vue的setup函数中使用 import {useStore} from "vuex"; import {computed} from "vue"; import {useRouter} from "vue-router"; export default { setup() { const store = useStore(); const router = useRouter(); const loginOut = () => { store.dispatch('userModule/loginOut'); router.push('/login') } return { isLoading: computed(() => store.state.userModule.isLoading), data: computed(() => store.state.userModule.data), loginOut, } } }

直接撸代码
对于撸代码的话，和vue2里面的差不多，只是vue3里面增加了compositionAPI 里面有比较大的改动，在写代码的时候，难免会有磕磕碰碰，祝愿大家在写代码的时候，写的都对。
这篇文章是基于本人想实现一个图片的网站，后台使用node,前台使用vue3，作为自己的练手项目，毕竟公司里面现在使用vue3对自己也哪方面都不好。有兴趣的可以看看项目地址演示地址