初始化vue_boot项目

初始化vue_boot项目

本文是springboot项目对应的前后端分离项目，前段初始化
初始化vue3_boot项目，提供最基本的路由以及组件
使用shell命令，全程命令化，简便操作

1.切换阿里云镜像源

#下载依赖特别慢的原因是默认镜像在国外，我们切换到阿里云
#安装nrm工具
npm install -g nrm
#手动添加(注意：请根据阿里云提供的最新镜像地址进行设置。)
nrm add aliyun https://maven.aliyun.com/repository/npm-group/
#检查当前正在使用的npm镜像源是否已经切换成功：
npm config get registry
#这样就会很快

2.初始化框架

#检查node(官网：https://nodejs.org/) vue3要求18以上
node -v
#初始化 
npm init vite@latest
#选择vue->JavaScript
#输入你要创建的项目名 选择vue 选择js
#执行以下三条命令
cd 项目名
npm install
npm run dev

到这里一般就可以了，下面是组件之类用不用取决于自己

3.安装element plus 以及其中文语言包

# 使用npm
npm install element-plus
#中文语言包不需要安装，只需要配置   

4.安装router，路由配置

#使用npm
npm install vue-router@4

5.提供router.js，以及main.js

router.js

import { createRouter, createWebHistory } from 'vue-router';

//引入一个一个可以能要呈现的组件


import APP from '@/App.vue'

//第二步 : 创建路由器
const router = createRouter({
    history : createWebHistory(), //路由器的工作模式
    routes : [ //一个个的路由规则
        {
            path:'/',
            component:APP
        }  
    ]
})

//暴露出去
export default router

main.js

import { createApp } from 'vue';
import App from './App.vue';
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import zhCn from 'element-plus/es/locale/lang/zh-cn'; // 使用 es 目录下的语言包
import router from './router';
import { createVuetify } from 'vuetify';
import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';
import '@mdi/font/css/materialdesignicons.css'; 
const app = createApp(App);
const vuetify = createVuetify({
    components,
    directives,
  });

app.use(ElementPlus, { locale: zhCn });
app.use(router);

app.use(vuetify).mount('#app');


// 项目启动后，重定向到自定义页面
router.push('/');

6.设置启动端口（不需要跳过即可）vue.config.js

const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  devServer: {
    port: 5254
  },
  transpileDependencies: true
});