从零开始创建VUE3.0项目

首先要创建Node.js环境

Node.js — Run JavaScript Everywhere

查看本机是否安装Node.js环境，打开CMD命令输入Node就会出现版本

接下来我们要使用vite 来创建

创建命令： npm create vue@latest

创建的是时候有很多选项，这个根据自己需要来选择，不会的就按照上面来选择即可

英文版和中文版是相对应的

现在项目就创建完成了。

接下来我们就使用VSCode打开项目：

VSCode常用快捷键如下：

1. 使用快捷键:

   • 增大字体: Ctrl + + (Windows, Linux) 或 Cmd + + (Mac)
   • 减小字体: Ctrl + - (Windows, Linux) 或 Cmd + - (Mac)

VSCode中，代码格式化的快捷键如下：

• Windows/Linux:

  • 格式化整个文件: Shift + Alt + F
  • 格式化选中的代码: Ctrl + K, 然后 Ctrl + F

• macOS:

  • 格式化整个文件: Shift + Option + F
  • 格式化选中的代码: Cmd + K, 然后 Cmd + F

使用 Ctrl + J 切换面板，调出底部终端和调试控制台

输入：npm i   安装所有依赖

安装完依赖需要重启软件方可生效

接下来我们来运行项目：npm run dev

停止脚手架 Ctrl + C 即可

常见问题：

当遇到任何错误，看着没有问题，就是报错，那么就重启软件，再试试。

错误：加载引用“https://json.schemastore.org/package”时出现问题: 无法从“https://json.schemastore.org/package”加载架构: getaddrinfo ENOTFOUND json.schemastore.org。

解决方法：

"$schema": "https://json.schemastore.org/jsconfig",

添加到package.json文件的第一行：

  "$schema": "https://json.schemastore.org/jsconfig",

  也就是 "name": "videoedit", 的上一行即可

错误： 无法找到模块“./components/XXX.vue”的声明文件

解决方法：

执行：npm install @vue/babel-plugin-jsx

再env.d.ts文件里写入

declare module '*.vue' {
  import { DefineComponent } from 'vue';
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

---

创建Vue3 + Vite + TS + Element-Plus + Pinia 

创建项目
npm create vite
选择VUE、TS

安装依赖
npm i

安装路由
npm i vue-router

安装全局管理
npm i pinia

安装API请求包
npm i axios

安装UI框架
npm i element-plus

安装图标

npm install @element-plus/icons-vue

安装sass
npm i sass sass-loader -D

安装MD5

npm install md5js

安装进度条控件

npm install --save nprogress

路由引用并使用

//使用 nprogress 进度条库来显示页面加载进度

import NProgress from "nprogress";

import "nprogress/nprogress.css";

// beforeEach 钩子

router.beforeEach((to, from, next) => {

  NProgress.start();

  next();

});

// afterEach 钩子

router.afterEach((to, from) => {

  if (to.meta && typeof to.meta.title === "string") {

    document.title = to.meta.title;

  }

  NProgress.done();

});

走到这步突然发现没有安装pinia   

npm install pinia

安装

npm i pinia-plugin-persistedstate

没整明白，直接卸载

 npm r pinia-plugin-persistedstate

安装插件：

别名路径跳转

----------------------------------------------------------------

配置路径别名：

import path from "path";

vite.config.ts

export default defineConfig({

  plugins: [vue()],

  resolve: {

    alias: {

      //配置路径别名

      "@": path.resolve(__dirname, "src"),

    },

  },

});

如何解决跨域问题：

配置 Vite {#configuring-vite} | Vite中文网

vite.config.ts

  server: {

    proxy: {

      // 选项写法

      "/api": {

        target: "http://api.mokexs.com",

        changeOrigin: true,

        rewrite: (path) => path.replace(/^\/api/, ""),

      },

    },

  },

/api 代替了域名