Vue-项目搭建
【摘要】 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
使用
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)