一、创建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负责构建定义及页面组件归集。