创建一个 Vue 应用

已安装 16.0 或更高版本的 Node.js

1.生成项目运行以下命令

npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ Project name: … vue-project-app 
✔ Add TypeScript? … No / Yes 
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes 
✔ Add Pinia for state management? … No / Yes 
✔ Add Vitest for Unit testing? … No / Yes 
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes 
✔ Add ESLint for code quality? … No / Yes 
✔ Add Prettier for code formatting? … No / Yes Scaffolding project in ./<your-project-name>... Done.

按提示选择操作即可生成项目： vue-project-app

2.通过以下步骤安装依赖并启动开发服务器：

cd <your-project-name> 
> npm install 
> npm run dev

若要关联远程仓库：

此时关联远程仓库报错

PS D:\work\github\vue-project-app> git remote add origin git@github.com:gaoliulin/vue-project-app.git
fatal: not a git repository (or any of the parent directories): .git

原因：

当前的操作目录中没有.git文件

解决方法：

初始化即可

git init

3. 关联远程仓库

 `git remote add origin xxx.git`先添加到本地仓库

 `git push -u origin master`：表示把当前仓库的 master 分支和远端仓库的 master 分支关联起来，后面我们执行 push 或者 pull 都可以非常方便的进行操作了。

配置项目设置路由

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
import AboutView from '../views/AboutView.vue'
import LoginView from '../views/Login.vue'
import MainView from '../views/Main.vue'
import ErrorPage from '../views/ErrorPage.vue'
import One from '../components/one.vue'
import Two from '../components/two.vue'
import Three from '../components/three.vue'
import Four from '../components/four.vue'

const router = createRouter({
  // history: createWebHistory(import.meta.env.BASE_URL),
  history: createWebHistory(),
  routes: [
    {
      path: '/login',
      component: LoginView
    },
    {
      path: '/home',
      component: HomeView
    },
    {
      path: '/about',
      component: AboutView
    },
    {
      path: '/main',
      component: MainView,
      children: [
        {
          path: '/main/one',
          component: One,
        },
        {
          path: '/main/two',
          component: Two,
        },
        {
          path: '/main/three',
          component: Three,
        },
        {
          path: '/main/four',
          component: Four,
        },
        {
          path: '/main/:path',
          component: ErrorPage,
        }
      ]
    },
    {
      path: '/404',
      component: ErrorPage
    }
  ]
})

// 导航守卫
router.beforeEach((to, from) => {

  console.log('router.beforeEach--', to, from)
  // ...
  // 返回 false 以取消导航
  // return false
})

export default router

页面配置

main.vue 注意如果有子路由，在该组件需要配置 <router-view></router-view>

<template>
  <div class="common-layout layout-container-demo" >
    <el-container>
      <el-aside width="200px" class="aside">
        <!-- 头像 -->
        <div class="block" style="padding: 4px 0px 0 40px;">
          <el-avatar :size="50" :src="circleUrl" />
        </div>

        <!-- 侧边栏 -->
        <el-scrollbar>
          <NavBar />
        </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>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>  
</template>

代码库

# vue3.X（九）element-plus

vue3 (一) 脚手架搭建项目