使用vue3.0创建项目

安装nodejs网址：https://nodejs.cn/download/
查看电脑安装版本：cmd-node --version
一、使用 Vite 快速构建 Vue 项目
创建空目录 在创建目录输入cmd 在cmd输入一下代码
npm init vite@latest xindian.admin 1.选择vue 2.选择vue-tg 创建vue文件成功，
然后找到xindian文件夹输入npm install命令安装包 输入npm run dev 或 pnpm dev 是运行vue程序
二、项目目录介绍
node modules 模块包
public 公共资源
src 项目目录
assets 静态资源components 组件
App.vue 根组件
main.ts 根函数入口，全局配置生效的地方
package.json 项目配置文件，项目的标题、版本，模块的版本等信息
tsconfig.json TS配置文件
vite.config.ts Vite配置文件
三、打开Vue 程序
使用 VS Code 打开文件，选择文件–>打开文件夹，如图所示：

pnpm 安装介绍
pnpm地址：https://www.pnpm.cn/ 安装：npm install -g pnpm
pnpm 特点

在cmd 查看版本号：pnpm --version
安装scss样式
选择终端–>新建终端
pnpm install sass --save
框架介绍
基于Vue3，面向设计师和开发者的组件库(https://element-plus.gitee.io/zh-CN/)Element Plus,
四、安装命令
pnpm install element-plus --save
五、项目中导入
import ElementPlus from 'element-plus
import 'element-plus/dist/index.css
const app = createApp(App)
app.use(ElementPlus)
六、路由的配置和使用
1)路由的作用
URL地址和页面的适配
2)安装命令
pnpm install vue-router@next --save
3)新建相关页面
4)src目录下新建文件夹router，文件夹新建
路由文件index.ts按右侧代码块写入页面和路由映射关系
5)项目中导入
import router from './router
app.use(store)
6)在App.vue里面加上路由标签

import fcreateRouter,createWebHistory} from ‘vue-router’
import HomePage from “./views/HomePage.vue”
import LoveFlower from “./views/LoveFlower.vue”
const router = createRouter({history: createWebHistory(),
routes: [
{ path: ‘/’, component: HomePage .
{ path: ‘/loveflower’, component: LoveFlower } , ]
})
export default router
六、vuex介绍和使用
1.网址
https://vuex.vuejs.org/zh/
2.使用
1)安装：npm install vuex@next --save
2)src目录下新建文件夹vuex，新建文件index.ts
3)main函数里导入
import store from "./vuex/index
//挂载vuex
app.use(store)