这几个是官网链接 可以去看看
1.vite: https://vitejs.cn/guide/#trying-vite-online
2.pinia: https://pinia.vuejs.org/getting-started.html#installation
3.vue-router: https://router.vuejs.org/zh/installation.html
4.vue3: https://cn.vuejs.org/guide/introduction.html
第一步:我们这里使用vite创建项目
我这边用的是pnpm 速度快、节约磁盘空间、支持monorepo、安全性高 你们也可以用npm/yarn
pnpm创建:pnpm create vite
npm创建:npm init vite@latest
yarn创建: yarn create vite
1.
2.
3.
4.
5.我们打开vite.config.js文件配置一下路径别名 @
resolve: {
alias: {
"@": path.resolve(__dirname, "src"),
},
},
6.因为我们用的是ts 这边我们也要配置一下 打开tsconfig.json文件
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
第二步:我们安装开始Pinia存储库
pnpm安装:pnpm install pinia
npm安装:npm install pinia
yarn安装: yarn add pinia
1.
2. 我们在src里面创建一个store文件夹 在创建一个index.ts文件 将代码填写进去 记住我们装了typescript 如果文件后缀是js 会报什么未检测到类型 所有将js改为ts 下面这张图我忘记改了 后面改回来了
import { definestore } from 'pinia'
export const useStore = definestore('main', {
state: () => ({
name: '你好陌生人!'
})
})
3.在main.ts里面添加pinia实例 注意要放在mount("#app")前面
4.我们在src里面创建一个views文件夹 在创建一个home.vue文件 将代码填写进去
<script setup lang="ts">
import { useStore } from "@/store/index"
const stores = useStore()
</script>
<template>
<h1>{{ stores.name }} ♥ 欢迎来到 vite + vue3 + TS + vue-router + pinia</h1>
</template>
5.app.vue文件这里我们将默认的替换成我们现在这个 代码忘记复制了 到这一步pinia的配置已经结束 我们可以跑一下看看
第三步:我们安装开始vue-router路由
pnpm安装:pnpm install vue-router@4
npm安装:npm install vue-router@4
yarn安装: yarn add vue-router@4
1.
2.我们在src里面创建一个router文件夹 在创建一个index.ts文件 将代码填写进去
import { createRouter, createWebHistory } from "vue-router";
export const router = createRouter({
history: createWebHistory(),
routes: [
{
path: "/",
name: "home",
component: () => import("../views/home.vue"),
},
],
});
3.在main.ts里面添加router实例 注意要放在mount("#app")前面
4.app.vue文件这里我们将刚刚修改的替换成我们现在这个 代码忘记复制了 到这一步vue-router的配置已经结束 我们可以跑一下看看
<template>
<router-link to="/"></router-link>
<router-view></router-view>
</template>
现在一个简答基本的项目已经搭建好了 zzzz
原文地址:https://www.jb51.cc/wenti/3284230.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。