vue3框架搭建

技术选型

vue3

vue-router@4

element-plus

pinia

axios

sass

vue3项目创建

vite中文官网。其他包管理器的命令可去官网查看。

注意事项：npm原生代理很卡，可能会出现没有反应的现象。
解决方案：下载cnpm配置淘宝镜像。

vite创建vue项目
npm create vite@latest

执行命令出现的步骤：

可以继续吗？yes

技术选型：

项目名：viteadmin

选择框架：vue

选择js或者ts：js

后面就是：

进入项目：cd viteadmin

下载依赖：npm i

启动项目：npm run dev

ok到此项目创建成功。

全家桶配置

配置别名

在vite.config.js中配置下方指定代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path' // 新增
export default defineConfig({
  plugins: [vue()],
---------------------开始
  resolve: {
    //设置别名
    alias: {
      '@': resolve(__dirname, './src'),
    },
  },
---------------------结束
})

配置vue-router

npm install vue-router@4

 main.js中引入vue-router

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/router'//引入vue-router
const app = createApp(App)
app.use(router)//引入vue-router
app.mount('#app')

在/src/view文件夹下新建main.vue、home.vue、admin.vue、pinia.vue、sass.vue文件

admin.vue文件
<template>admin</template>
<script setup></script>

home.vue文件
<template>home</template>
<script setup></script>

main.vue文件
<template>
  <div>
    <router-link style="margin-right: 20px;" to="/home">home</router-link>
    <router-link style="margin-right: 20px;" to="/admin">admin</router-link>
  </div>
  <div>
    <router-view></router-view>
  </div>
</template>
<script setup></script>

pinia.vue文件
<template>