[JavaScript知识库]使用vite构建vue3项目(项目依赖基本介绍)

前提是安装了nodejs

npm init vite@latest

package.json

{
  "name": "vite-vue3",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
   #npm run dev 指的就是这里的名为dev，脚本为vite (dev也可以改为其他名字 比如abc  npm run abc 也能运行)
   # vite这个脚本在node_modules里面
    "dev": "vite",    
    # 会将项目打包,生成浏览器能够识别的html,css,js
    "build": "vite build",
    # npm run preview和上面的 npm run dev 效果是一样的
    "preview": "vite preview"
  },
  # 生产环境的依赖
  "dependencies": {
    "vue": "^3.2.37"
  },
  #开发环境的依赖
  "devDependencies": {
    "@vitejs/plugin-vue": "^3.1.0",
    "vite": "^3.1.0"
  }
}

比如安装下面的包会安装在开发环境的依赖包中

npm install vuex --save-dev 

比如安装下面的包会安装在生产环境的依赖包中

npm install element-plus --save

npm 命令总结
这几种命令都是一个意思，只不过写法不同

npm install vuex --save
npm install vuex -S
npm i vuex --save
npm i vuex -S

npm install vuex  --save-dev
npm install vuex -D
npm i vuex --save-dev
npm i vuex -D

三个重要的文件
index.html 静态文件
main.js 自动运行的脚本文件
app.vue 主组件,是页面入口文件

引入element-plus 会安装在开发环境中

npm install element-plus --save

在main.js中全局引入
这样就意味着所有的app下的组件都可以使用elementui

安装路由router

npm install vue-router@4

创建一个router文件夹,在里面创建index.js文件，管理路由

// 导入组件
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router"

import { Helloworld } from "../components/Helloworld";

// 创建路由匹配的数据集合

const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        component: Helloworld
    }
]

//创建一个vue-router的对象
const router = createRouter({
    history:createWebHistory(),
    routes
})

// 暴露
export default router

在main.js中全局引入

在APP.vue这个主组件入口（这样的话访问哪个路由就把对应的组件加载到这个App.vue窗口）