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, // 开发服务器端口}
})