Vue3 +Elementplus的学习 （用vite构建项目）

一、创建vite3项目：

1、在某个盘下面新建项目的文件夹，然后右键，在终端打开：

2、输入命令：

npm init vite

3、输入项目名称：

4、选择框架vue：

5、选择JavaScript:

6、进入到项目文件夹：

7、安装依赖：

npm install

8、项目启动：

npm run dev

二、页面结构：

1、

2、设置自动浏览和端口号（在vite.config.js里）：

三、手动安装路由：

1、使用命令安装：

npm install vue-router -S

2、手动添加路由文件：

3、在router文件夹下创建index.js文件：

4、在index.js里创建路由：

import { createRouter, createWebHashHistory } from "vue-router";
//路由的配置
const routes = [
  {
    path: '/',  //路径
    name: 'Home',  //名字
    component: () => import('')
  }
]
//创建路由对象
const router = createRouter({
  history: createWebHashHistory(),
  //routes:routes //当键值一样的时候可以简写
  routes
})

5、在main.js文件里导入：

先在index.js文件里进行导出：

export default router

在main.js里引入并且使用:

在vite.config.js里手动配置根目录：

四、引入Elementplus：

1、安装：

npm install element-plus --save

2、安装unplugin-vue-components：

npm install unplugin-vue-components -D

3、在vite.config.js里添加引入：

import Components from 'unplugin-vue-components/vite'
import { ElemengPlusResolver } from 'unplugin-vue-components/resolvers'

 Components({
      resolvers: [ElemengPlusResolver()],
    }),

五、各模块的定义：

1、main.js文件是入口文件，主要作用初始化vue实例同时可以在这个文件里引入组件库以及全局的一些变量，可以引入外部的css文件

1.实例化Vue。
2.放置项目中经常会用到的插件和CSS样式。例如： 网络请求插件:axios和vue-resource、图片懒加载插件：vue-lazyload
3.存储全局变量。例如（用于的基本信息）

2、App.vue是项目的主组件，页面入口文件 ，所有页面都在App.vue下进行切换，app.vue负责构建定义及页面组件归集。