Vue-项目搭建

举报
林太白 发表于 2025/01/20 11:32:18 2025/01/20
140 0 0
【摘要】 Vue-项目搭建

❤ 项目搭建

项目采取方式 Vue3+Pinia+Vant3/ElementPlus+typerscript

1、项目环境和简介

项目技术栈相关简介:

技术栈如下:

Vue3全家桶
vite
TS
Pinia
Vant3/ElementPlus(目前以ElementPlus为主)

环境

使用nvm 版本 20.12.0
node 版本 20.12.0
npm版本 10.5.0

  • 检测自己本地的环境(我本地使用的nvm,强烈建议使用nvm管理版本)
node -v  // v20.12.0
npm -v   // 10.5.0

2、搭建开发

(1)环境准备(好了直接跳过)

建议使用nvm 管理版本:

node环境

前提条件:已安装 16.0 或更高版本的 Node.js

检测node环境

node -v  // v20.12.0

npm 环境

检测npm环境

npm -v  // v10.5.0

(2)项目新建和运行

yarn搭建项目的命令:(建议1)


// 使用vue的模板进行创建 (这是我项目使用的和本人推荐的方式 )
yarn create vite <ProjectName> --template vue
或者采用下面这种方式 
yarn create vite lintaibai  // 普通使用vite创建

这里选择的vue+TS的组合

创建项目名称 
选择主要框架Vue  
选择语言 

项目运行成功以后提示:

依次输入命令:

cd nexus
yarn 
yarn dev

成功以后的页面:

3、安装Vue Router路由

vue3需要安装4.0以上版本

yarn add vue-router@4 --save

使用

Vue Router使用

4、安装pinia

介绍

类似vue2的vuex状态管理,简单来说就是一个存储数据的地方,存放在Vuex中的数据在各个组件中都能访问到,它是Vue生态中重要的组成部分。

使用

安装

yarn add pinia

修改main.ts,引入pinia提供的createPinia方法,创建根存储

import { createPinia } from 'pinia' // 引入pinia
app.use(createPinia()).use(router).mount('#app') //挂载

你的main.ts完整代码这会应该如下

完整这会应该如下:
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
// 挂载router
import router from "./router/index" // 引入router

const app = createApp(App)
app.use(createPinia()).use(router).mount('#app') //挂载

5、安装axios

安装

yarn add axios

6、使用ElementPlus

☞ 安装

yarn add element-plus --save

☞ 完整导入ElementPlus

main.ts中引入:

// 引入组件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(createPinia()).use(ElementPlus)
app.mount('#app')

测试使用效果:

<el-button type="primary">Primary</el-button>

你的main.ts完整应该如下

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
// 挂载router
import router from "./router/index" // 引入router
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
const app = createApp(App)
app.use(createPinia()).use(ElementPlus).use(router).mount('#app') //挂载

到这里我们的基础环境和项目最基础的配置就已经好了…

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。