当前位置：首页 > article >正文

vue初始化脚手架

article 2025/3/4 9:00:32

Vue初始化脚手架是指使用Vue CLI（Command Line Interface）工具来创建一个Vue项目的基础结构。Vue CLI是Vue.js官方提供的一个脚手架工具，它可以帮助开发者快速搭建Vue项目的基本框架，包括目录结构、配置文件、依赖管理等。

1. 初始化Vue脚手架的步骤

1.1 全局安装Vue CLI

npm install -g @vue/cli

1.2 查看vue版本

vue --version

1.3 创建Vue项目

vue create my-project

1.4 进入项目目录

cd my-project

1.5 启动开发服务器

npm run serve

2. 项目结构

初始化后的Vue项目具有以下基本结构：

my-project
├── node_modules
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── assets
│   ├── components
│   ├── App.vue
│   └── main.js
├──.gitignore
├── babel.config.js
├── package.json
└── README.md

public目录包含了HTML文件和其他静态资源。
src目录包含了Vue应用的源代码，包括组件、样式和逻辑。
package.json文件管理项目的依赖和脚本。

3. 自定义配置

Vue CLI允许你通过vue.config.js文件对项目进行自定义配置。你可以在这个文件中修改Webpack配置、添加插件、配置开发服务器等。

3.1 修改服务器端口

打开vue.config.js，通过port修改端口号

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    port: 3000, // 开发服务器端口
  }
})

查看全文

http://www.kler.cn/a/421666.html