vue3-项目快速搭建和初始化

环境安装

npm安装

Node.js各版本：Previous Releases | Node.js (nodejs.org)

Linux

1. 从官网下载最新版，文件名中是带了linux字样的，如node-v16.20.0-linux-x64.tar.xz

2. 解压：如果是tar.xz文件，则先用xz -d node-xxxxx.tar.xz现将tar.xz解压为tar包，然后再tar -xvf node-xxx.tar解压；如果是tar.gz文件，则直接tar -zxvf node-xxx.tar.gz解压

3. 将解压目录移动到/usr/local/：mv node-v16.20.0-linux-x64 /usr/local/node

4. 创建软链接：ln -s /usr/local/node/bin/node /usr/bin/node

5. 创建软链接：ln -s /usr/local/node/bin/npm /usr/bin/npm

6. 查看命令的版本：npm -v；node -v

Windows

下载安装node-vxx.x.x-x64.msi

常用配置

设置源

npm config set registry xxxxx   
# npm config set registry=http://registry.npm.taobao.org

设置默认目录

# Linux
npm config set prefix "/usr/local/node/global"
npm config set cache "/usr/local/node/cache"

# Windows
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"

安装前端构建工具

vue-cli脚手架

npm install -g @vue/cli

vite

npm install -g vue@latest 
npm install -g webpack 
npm install -g webpack-cli 
npm install -g vite 

安装基本模块

npm install -g element-plus
npm install -g axios
npm install -g vue-router
npm install -g vuex

创建和启动项目

vue-cli

vue create 项目名称

cd 项目名称
npm install              # 安装模块
npm run serve            # 启动运行

vite

npm init vite-app 项目名称

cd 项目名称
npm install
npm run dev

具体命令，详见vite.config.js配置文件

基本代码框架

引用elementPlus

main.js

// 导入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

// icon使用
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

// 使用element-plus
app.use(ElementPlus)

页面vue框架

App.vue

MainView.vue

src/views/MainView.vue

Login.vue

src/views/Login.vue

关于登录，可详见本人《vue3-简单登录认证前端实现样例-CSDN博客》一文。

路由设置

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import MainView from '../views/MainView.vue'
import LoginView from '../views/LoginView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'Home',
      component: MainView
    },
    {
    path: '/aaa',
      name: 'aaa',
      component: MainView,
      children:[
        {
          path: 'aaa/bbb',
          name: 'aaa_bbb',
          component: () => import('@/components/xxxx.vue'),
          meta:{
          }
        }
      ]
    },
    {
      path: '/login',
      name: 'Login',
      component: LoginView,
      meta:{title:"登录"}
    },
    {
        path: '/:pathMatch(.*)*',
        name: 'NoFound',
        component: () => import('@/components/404.vue'),
        meta:{title:"404"}
    },
  ]
})

关于多级路由设置，详见本人《vue3-多级路由实现登录页面与业务功能页面分离_扬雨于今的博客-CSDN博客》