一、vue前端项目搭建

官网

脚手架

sh 复制代码

pnpm create vue@latest

纯手建

第一步：初始化项目

sh 复制代码

pnpm init

第二步：修改package.json文件如下

json 复制代码

{
  "name": "ProjectName",
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

第三步：创建.npmrc配置下载源，推荐使用淘宝/阿里云镜像，速度较快

sh 复制代码

touch .npmrc && cat << 'EOF' >> .npmrc
registry=https://registry.npmmirror.com/
EOF

第四步：下载如下三个核心依赖

sh 复制代码

# vue：Vue 的核心库，让项目能够运行 Vue 框架
pnpm add vue
# vite：开发服务器和打包工具，提供快速启动和热更新功能
pnpm add -D vite
# @vitejs/plugin-vue：让 Vite 能够识别并编译 .vue 文件
pnpm add -D @vitejs/plugin-vue

第五步：添加相关文件

1、jsconfig.json

json 复制代码

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

2、vite.config.js

js 复制代码

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
})

3、public/favicon.ico：放入一个网页图标

4、index.html

html 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Des-pupilles的个人博客</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
</body>
</html>

5、src/main.js

js 复制代码

import { createApp } from "vue";
import App from "./App.vue";

createApp(App).mount("#app");

6、src/App.vue

vue 复制代码

<template>
    页面
</template>

7、主要目录结构

plaintext 复制代码

ProjectName
    ├── package.json                  # 项目配置文件
    ├── .npmrc                        # npm 镜像源配置
    ├── jsconfig.json                 # JS 路径别名配置
    ├── vite.config.js                # Vite 构建配置
    ├── index.html                    # 入口 HTML 文件
    ├── public/
    │   └── favicon.ico               # 网站图标
    └── src/
        ├── main.js                   # 应用入口文件
        └── App.vue                   # 根组件