Vue3开发项目流程总结

1、Vite构建项目命令：

#vite官网：https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project
# 方式一：
# Vite构建项目
npm init vite-app <Project-name>
cd <Project-name>
# 安装
npm install
# 卸载
npm uninstall element-plus
# 运行项目
npm run dev

# 方式二：
1、npm create vite@latest
2、输入项目名称
3、选择vue-ts
4、cd tumake
5、npm install
6、npm run dev

1.1、Vue/CLI构建项目：

vue create musicapp

? Please pick a preset:
  Default ([Vue 2] babel, eslint)
  Default (Vue 3) ([Vue 3] babel, eslint) 
> Manually select features

? Check the features needed for your project: 
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support        
 (*) Router
 (*) Vuex
 (*) CSS Pre-processors
>(*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
 
? Choose a version of Vue.js that you want to start the project with 
  2.x
> 3.x

? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): 
> Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus
  
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit
 
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json
  
? Save this as a preset for future projects? (y/N) y

? Save preset as: bing-cli-vue3

cd musicapp
npm run serve

1.2 vue ui创建项目

1、点击创建
2、点击右边笔，在路径里贴粘：D:\VueWorkSpace 然后回车
3、输入项目名称
4、手动
5、勾选：Choose Vue version、Babel、TypeScript、Router、Vuex、CSS Pre-processors、Linter / Formatter、使用配置文件
6、选择 3.X、Sass/SCSS (with dart-sass)、ESLint + Standard config
7、创建项目，不保存预设
8、http://localhost:8000/dashboard
9、依赖、运行依赖、搜索axios、安装axios

2、安装Element Plus

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

3、安装axios

npm i axios
或者
cnpm install axios --save

4、安装nprogress

npm install --save nprogress

5、安装js-md5

npm install js-md5

6、安装element-plus/icons-vue

npm install @element-plus/icons-vue

# 卸载element-plus/icons
npm r @element-plus/icons-vue

7、安装Vue-Quill-Editor

# 文档地址：https://vueup.github.io/vue-quill
#安装
npm install vue-quill-editor --save
# or
yarn add vue-quill-editor

8、ECharts

npm install echarts --save

9、nanoid(一个Vue自动生成Id的插件)

npm install --save nanoid

10、pubsub-js消息订阅发布安装

npm i pubsub-js

11、项目重命名

1、修改项目名称
2、删除 node_modules 文件夹
3、package.json中修改对应的name
4、重新安装依赖 npm install
5、启动项目 npm run dev

12、vscode本地开发配置的vite跨域反向代理会导致axios请求API访问很慢，不必担心，不会发布到生产环境，部署到生产环境反向代理是靠nginx实现。

//vite.config.ts
    // 在文件中添加host绑定IP访问以及跨域访问
    server: {
      host: "0.0.0.0",
      proxy: {
        //跨域
        // 如果是 /api 打头，则访问地址如下
        "/api": {
          target: loadEnv(mode, process.cwd()).VITE_PROXY,
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ""),
        },
        "/upload": {
          target: loadEnv(mode, process.cwd()).VITE_IMAGE_BASE_URL,
          changeOrigin: true,
        }
      },
    },

12、发布项目，目录名：dist

npm run build