Vue脚手架详解与使用-CSDN博客

本文链接：https://blog.csdn.net/sky6even/article/details/104074086

本文详细介绍了Vue脚手架的作用、安装方法、创建Vue项目的不同方式，包括手动选择特性、UI界面创建以及基于2.x旧模板创建，并探讨了Vue脚手架生成的项目结构和自定义配置选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

◆ Vue脚手架作用：

Vue脚手架可以快速生成Vue项目基础的架构。

◆ Vue脚手架安装：

npm install -g @vue/cli

脚手架安装报错：

npm ERR! code EPERM
npm ERR! syscall unlink
npm ERR! path C:\Users\ASUS\AppData\Roaming\npm\node_modules\.staging\yarn-2a3eea01\lib\cli.js
npm ERR! errno -4048
npm ERR! Error: EPERM: operation not permitted, unlink 'C:\Users\ASUS\AppData\Roaming\npm\node_modules\.staging\yarn-2a3eea01\lib\cli.js'
......

修复方案：

使用npm install -g npm , 安装最新版本的npm, 防止因为npm版本过低造成的上述问题

如果仍然报错, 那么可能是缓存造成的问题, 使用下面三条语句中的某一条

npm cache verify
npm cache clean
npm cache clean --force

◆使用命令创建Vue项目

vue create my-project

选择Manually select features(选择特性以创建项目)
勾选特性可以用空格进行勾选。
是否选用历史模式的路由：n
ESLint选择：ESLint + Standard config
何时进行ESLint语法校验：Lint on save
babel，postcss等配置文件如何放置：In dedicated config files(单独使用文件进行配置)
是否保存为模板：n
使用哪个工具安装包：npm

◆ 基于ui界面创建Vue项目

在自动打开的创建项目网页中配置项目信息。

vue ui

◆ 基于2.x的旧模板创建Vue项目

npm install -g @vue/cli-init
vue init webpack my-project

◆ Vue脚手架生成的项目结构

node_modules:依赖包目录
public：静态资源目录
src：源码目录
src/assets:资源目录
src/components：组件目录
src/views:视图组件目录
src/App.vue:根组件
src/main.js:入口js
src/router.js:路由js
babel.config.js:babel配置文件
.eslintrc.js:

◆ Vue脚手架的自定义配置：

通过单独的配置文件进行配置，创建vue.config.js

module.exports = {
    devServer:{
        port:8888,
        open:true
    }
}

通过 package.json 进行配置 [不推荐使用]

 "vue":{
     "devServer":{
         "port":"9990",
         "open":true
     }
 }