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和vite二选一即可。

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

具体命令，详见package.json配置文件

基本代码框架

引用elementPlus

main.js

import App from './App.vue'
import { createApp } from 'vue'
import router from './router'
// 导入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)
app.use(router)
app.mount("#app")

页面vue框架

App.vue

<template>
    <RouterView />
</template>

<script>
import { RouterView } from 'vue-router'
export default {
 
}
</script>

MainView.vue

src/components/MainView.vue

<template>
  <el-container class="layout-container-demo" style="height: 500px">
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu :default-openeds="['1', '3']">
          <el-sub-menu index="1">
            <template #title>
              <el-icon><message /></el-icon>Navigator One
            </template>
            <el-menu-item-group>
              <template #title>Group 1</template>
              <el-menu-item index="1-1">Option 1</el-menu-item>
              <el-menu-item index="1-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="1-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="1-4">
              <template #title>Option4</template>
              <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><icon-menu /></el-icon>Navigator Two
            </template>
            <el-menu-item-group>
              <template #title>Group 1</template>
              <el-menu-item index="2-1">Option 1</el-menu-item>
              <el-menu-item index="2-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="2-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="2-4">
              <template #title>Option 4</template>
              <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
          <el-sub-menu index="3">
            <template #title>
              <el-icon><setting /></el-icon>Navigator Three
            </template>
            <el-menu-item-group>
              <template #title>Group 1</template>
              <el-menu-item index="3-1">Option 1</el-menu-item>
              <el-menu-item index="3-2">Option 2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="Group 2">
              <el-menu-item index="3-3">Option 3</el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="3-4">
              <template #title>Option 4</template>
              <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar">
          <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px"
              ><setting
            /></el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>View</el-dropdown-item>
                <el-dropdown-item>Add</el-dropdown-item>
                <el-dropdown-item>Delete</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <span>Tom</span>
        </div>
      </el-header>

      <el-main>
        <!-- <RouterView />  -->  <!-- 以此替换下方的el-scrollbar  -->  
        <el-scrollbar>
          <el-table :data="tableData">
            <el-table-column prop="date" label="Date" width="140" />
            <el-table-column prop="name" label="Name" width="120" />
            <el-table-column prop="address" label="Address" />
          </el-table>
        </el-scrollbar>

      </el-main>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'

const item = {
  date: '2016-05-02',
  name: 'Tom',
  address: 'No. 189, Grove St, Los Angeles',
}
const tableData = ref(Array.from({ length: 20 }).fill(item))
</script>

<style scoped>
.layout-container-demo .el-header {
  position: relative;
  background-color: var(--el-color-primary-light-7);
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  color: var(--el-text-color-primary);
  background: var(--el-color-primary-light-8);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>

LoginView.vue

src/components/LoginView.vue

<template>
    <div style="display: flex;justify-content: center;margin-top: 150px">
      <el-card style="width: 500px">
        <div class="clearfix" style="text-align:center">
          <h2>用户登录</h2>
        </div>
        <table style="margin-top:40px;width:100%">
          <tr>
            <td>用户</td>
            <td>
                <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
            </td>
          </tr>
          <tr>
            <td>密码</td>
            <td>
                <el-input type="password" v-model="user.password" placeholder="请输入密码" @keydown.enter="doLogin"></el-input>
            </td>
          </tr>
          <tr>
            <td colspan="2">
              <el-button style="width: 50%;margin-left:25%;margin-top:20px" type="primary" @click="doLogin">登录</el-button>
            </td>
          </tr>
        </table>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      user: {
        username:'',
        password:''
      }
    }
  },
  methods: {
    doLogin(){
      alert("发送用户名密码给后台做校验")
    }
  }
}
</script>

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

路由设置

src/router/index.js

import { createRouter, createWebHistory } from 'vue-router'
import MainView from '../components/MainView.vue'
import LoginView from '../components/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博客》