安装命令
# 安装命令
npm init vite@latest
安装命令执行完会有几个选项，以下是我的选项
Ok to proceed? (y) y # 是否继续（输入y）
√ Project name: ... testproject # 项目名(按上下键选择，回车确定)
√ Select a framework: » Vue # 选择框架(按上下键选择，回车确定)
√ Select a variant: » JavaScript # 选择语言(按上下键选择，回车确定)
- 然后上述命令执行完，会在终端生成以下三条命令，按顺序执行即可，最后一个是项目启动文件
- 之后启动项目只需要在终端进入项目文件夹下，输入启动命令即可生成本地网址，复制到浏览器打开
# 进入项目文件夹，
cd xxxxx
# 下载依赖文件
npm install
# 项目启动命令
npm run dev
- 创建的项目没有 router 和 pinia , 需要手动下载
- 注意： 进入项目文件夹后再安装 router 和 pinia
# router安装命令
npm install vue-router
# pinia安装命令
npm install pinia
编写router 和 pinia
-
router页面：
在src目录下创建一个router文件夹，并在其中创建一个index.js文件。 - router页面编写
// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
{
path: '/',
name: 'Home',
component: () => import('@/views/Home.vue')
},
]
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes
})
export default router
-
pinia页面
在src目录下创建一个stores文件夹，并在其中创建一个index.js文件 - pinia页面编写
这是一个pinia写法的模版
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})
配置 router 和 pinia
- 首先需要再main.js文件中引入并挂载
import './style.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.mount('#app')
- 以上做完基本就可以了， 但是还有个路径需要配置，配置完成后，引入src里的文件就可以用@开头
- 打开vite.config.js文件，添加下面两句代码
import { fileURLToPath, URL } from 'node:url'
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
- 这是完整代码
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue()
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})
