环境搭建
安装如下框架
node、npm、nvm等
mac推荐使用homebrew安装
开发工具
建议Visual Studio Code （vscode有很多插件，网上自行百度）
项目创建
采用vue-cli创建项目，先全局安装vue-cli
Vue 3 npm install -g @vue/cli
Vue 2 npm install -g vue-cli
创建完成后输入vue -v 查看版本
Vue2创建项目 vue init webpack projectname
Vue3创建项目 vue create projectname
新项目建议使用vue3，创建流程参考如下地址
https://www.cnblogs.com/loveyaxin/p/10107550.html
https://www.jianshu.com/p/12a64b7bc665
建议安装依赖有：
Choose Vue version
Babel
TypeScript
Router
Vuex
CSS Pre-processors
浏览器
Chrome
推荐安装vue调试插件
组建安装
初级建议项目依赖安装vue ui安装
安装完vue-cli后，终端执行命令：vue-ui
常用组建推荐使用npm安装
npm install element-plus –save
采用vue-cli脚本安装
Vue add vue-router
Vue基础组建
“vue”: “^2.6.11”, // vue
“vue-router”: “^3.1.6”, // 路由
“vuex”: “^3.1.3” // 数据共享
常用UI组建
pc端：ElementUI、 View UI
移动端：vant、Mint UI、Cube UI
管理系统框架：vue-vben-admin
常用CSS及预处理库
“sass”: “^1.26.5”,
“sass-loader”: “^8.0.2”,
sass和less区别
https://www.cnblogs.com/pink-chen/p/10727915.html
“animate.css”: “^3.7.2”, // 动画组建
“normalize.css”: “^8.0.1”,// css在不同浏览器中样式统一
lib-flexible 是网页做 html 的 font-size 适配用的
postcss-pxtorem 是在编译的时候对 px 单位转换为 rem 单位时使用
常用js库
百度搜索即可，一般都有教程
“core-js”: “^3.6.5”,// 基础js
“axios”: “^0.19.2”, // 网络请求
“docxtemplater”: “^3.19.7”, // 前端word模版库
“echarts”: “^4.9.0”, // 图表库
“file-saver”: “^2.0.5”, // 文件保存库
“js-base64”: “^2.5.2”, // 加密
“js-cookie”: “^2.2.1”, // 存储
“js-md5”: “^0.7.3”, // 加密
“jszip-utils”: “^0.1.0”, // 压缩
“pizzip”: “^3.0.6”, // 压缩
“qs”: “^6.9.4”, // url编码
“screenfull”: “^5.0.2”, // 全屏功能
图片裁剪、压缩组件： vue-croppa
时间格式化库： date-fns
动画js库： Velocity.js
打印div组件： vue-print-nb
丰富文本编辑器： vue-quill-editor
Webpack配置
vue内部已经配置好了webpack，如果想扩展需要创建vue.config.js
vue.config.js
https://cli.vuejs.org/zh/config/#publicpath
为什么npm打包的dist不能直接访问
这是因为dist文件是需要放在服务器上运行的，资源默认放在根目录下。打开index.html可以发现，css和js文件的引用使用的是绝对路径，例如：，对本地磁盘来说，/指向磁盘根目录，所以找不到引用的文件。
有以下解决方案：1. 使用http-server创建一个服务器来访问资源；2. 将index.html中资源引用的绝对路径改为相对路径；3.还可以手写一个简单的node服务器。