前端开发项目搭建方式及Vue CLI 方式举例

 Vue CLI   是 Vue 早期推出的一款脚手架，使用 webpack 创建 Vue 项目，可以选择安装需要的各种插件，比如 Vuex、VueRouter等。
 vue-cli 用于创建 vue2 的项目；
 @vue/cli 用于创建 vue3 的项目，当然也支持 vue2。
 create-vue 是 Vue3 的专用脚手架，使用 vite 创建 Vue3 的项目，也可以选择安装需要的各种插件，使用更简单。
 create-vue 基本取代了 vue-cli，除非你想创建 vue2 的项目。 使用方式：npm init vue@latest
使用 vite 不仅可以创建 vue 的项目，而且可以创建 react 等项目，只是需要手动安装第三方插件，有点麻烦。 npm create vite@latest

webpack、vite、vue-cli、create-vue 的区别：

脚手架	vue-cli	create-vue
构建项目		vite
打包代码	webpack	rollup

基于js的web后台创建
创建个web后台项目文件夹 server
cd server      跳转到项目目录server
npm init -y    在项目目录下创建package.json
npm install koa  安装koa2
创建功能目录和组件和资源文件
创建app.js入口文件
node app.js  启动项目
npm i ws -S   安装WebSocket，对项目进行改造

通过vue-cli搭建前端项目
npm install @vue/cli -g   全局安装vue脚手架，一台电脑安装一次
vue create vision   创建vue项目vision 选择CSS预处理器 Pre-processors
选择CSS预处理器的语言 less，选择ESLint的配置标准模式的配置（Standard config）
cd vision       定位到项目目录
npm install axios   安装axios组件
npm install     安装依赖项
npm run serve   运行启动项目
Vue.prototype.$echarts = window.echarts    echarts挂载
Vue.prototype.$http = axios              axios挂载
通过this.$echarts 和 this.$http 访问

开发EChart 大屏资料参考：

https://www.runoob.com/tailwindcss/tailwindcss-typography.html
https://tailwindcss.com/   --前端框架
https://bootcss.com/    --前端框架grid 
https://cssgridgarden.com/ 
https://www.runoob.com/  --菜鸟教程
https://developer.mozilla.org/zh-CN/docs/Web/CSS   --菜鸟教程
https://echarts.apache.org/zh/index.html
https://echarts.apache.org/examples/zh/index.html
https://echarts.apache.org/handbook/zh/get-started/
https://www.isqqw.com/  图表可实时视化样式调试
iconfont.cn  阿里巴巴矢量小图标