搭建兼容ie9的vue框架

很多前端工程师忙于业务代码开发，工作几年也不知道如何搭建一个框架。这篇文章希望能帮你学会如何搭建一个兼容ie9的vue框架，本文基于你有一定的前端工作经验，纯小白可能看得比较吃力。

• 文章最后会放出我的项目地址。
• 项目主要包括： sass 全局scss文件 postcss echarts element-ui vuex mockjs。
• 依赖的版本很关键，不同版本配置有差异，很多教程就是依赖没写清楚，教程写的很好，使用者操作起来会遇到很多错误。
• 项目很简单，只有有3个路由，分别介绍 vuex3 mockjs echarts的使用。

本地依赖

@vue/cli 4.5.13
vuex 3.4
vue 2.6
sass 1.26
sass-loader 8.0
sass-resources-loader 1.3
postcss-loader 7.0
autoprefixer 8.6

vue ui命令搭建基础框架

vue ui

选项选择 router vuex scss vue ui 使用参考 blog.csdn.net/Angela_Conn...

vuex@3使用

我的代码依赖lodash，所以要先安装，并不是vuex必须要用，是个人习惯。

cnpm i lodash -S  

下面是项目目录作用，这里需要结合项目来看。

文件	作用	备注
views/Vuex3		路由文件
store/index	引用store	npm需要安装vuex
store/modules/user	一般写法
store/modules/userManage	常量写法	引入lodash(非必要，用里面的set方法给对象or数组赋值)
store/mutations-types	常量文件
./main.js	引入store

项目引入 element

cnpm i element-ui -S

main.js 引入

项目引入 Echarts

cnpm i echarts -S

我没有在main全局引入echarts

sass-resources-loader 全局scss文件

cnpm i sass-resources-loader -D  

vue文件写lang='scss'，全局引入的必须是scss,不然报奇怪的错误

全局scss在vue.config.js里面配置

// vue.config.js 
css: {
    loaderOptions: {
      scss: {
        prependData: '@import "./src/index.scss";',
      },
    },
  },

发布网站 下面命令可以把自己的本地项目部署到网上去

zhuanlan.zhihu.com/p/578452272...

cnpm install -g vercel  

- npm run build  
安装完成后，进入 public 目录，通过 vercel 命令发布网站：  
- cd public  
vercel deploy --name vue_svelte  

项目git地址

gitee.com/ldoll/vuecl... 我也在业余时间写了其他版本的前端框架，需要可看我gitee主页 vueui5--vue2-postcss-mockjs-ie10 react17-webpack4-react-router5-mobx vite3-react18-router6-antd4-mobx6