@vue/cli 手动创建项目

@vue/cli项目创建过程详解,包括手动选择特性、安装插件如Router、选择CSS预处理器和代码检测配置,以及配置保存位置。

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

@vue/cli 手动创建项目

vue-cli 创建项目命令

vue create myfirstdemo(项目名)

1、执行命令后,vue-cli会提示选择默认安装预先设定好地插件还是选自手动选择(Manually select features),如果一般小项目选择默认即可;在这里,选择的是手动设置(Manually select features),按上下键进行选择,选择后,按enter键
在这里插入图片描述
2、选择项目中需要设置安装的插件
在这里插入图片描述
此处的pwa,大家可能都会有疑问,pwa是什么技术,在此不进行描述,详情请看:https://juejin.im/post/5a6c86e451882573505174e7

这篇文章详细介绍pwa

3、如果选择Router后,下一步会提示是否选择使用history模式的router
在这里插入图片描述
vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。eg:localhost:8080/#/demo

如果想去除上述url例子中的 “#” 好,可以使用 history 模式,在项目中一般都推荐使用 history 模式

4、选择css样式预处理器

在这里插入图片描述
5、选择哪个代码检测配置
在这里插入图片描述
ESlint with error prevention only 只选择eslint进行代码校验
ESlint + Airbnb config/ Prettier 不熟悉,在此不做描述
ESlint + Standard config eslint代码检验 + standard 自定义标准

6、是否选择安装lint的额外的插件
在这里插入图片描述
lint on save 在保存时对代码进行校验
lint and fix on commit 在往代码库提交时,对代码进行校验并自动修复

7、将Babel、PostCSS、ESLint等配置放在哪里
在这里插入图片描述
8、将预设的配置,保存到你想保存的位置,默认是保存在项目中
在这里插入图片描述
enter 键后,就可以等待自动安装相应的插件。。。

### @vue/cli-service 的使用方法与常见问题 #### 一、@vue/cli-service 简介 `@vue/cli-service` 是 Vue CLI 创建项目的开发服务器和服务工具的核心包。它提供了构建、运行开发服务器以及生产环境打包等功能[^1]。 #### 二、错误处理案例分析 当遇到 `Error: @vitejs/plugin-vue requires vue (>=3.2.13)` 错误时,这通常是因为项目依赖树中缺少必要的 Vue 版本或其编译器插件[@vue/compiler-sfc][^2]。以下是解决方案: - **确认版本兼容性**:确保当前使用的 Vue 版本满足最低要求(即 >=3.2.13),可以通过以下命令检查: ```bash npm list vue ``` - **安装缺失依赖项**:如果发现未安装必要组件,则可以尝试通过以下方式修复: ```bash npm install vue@latest --save-dev npm install @vue/compiler-sfc --save-dev ``` #### 三、全局卸载并重装 Vue CLI 工具链 对于某些情况下无法正常工作或者存在冲突的情况,可能需要完全移除现有 Vue CLI 并重新安装指定版本。具体操作如下所示[^3]: - 卸载旧版 Vue CLI: ```bash npm remove -g @vue/cli ``` - 使用 cnpm 安装特定版本(如需回退至稳定版 4.x 可按此步骤): ```bash cnpm install -g @vue/cli@4.5.15 ``` - 验证安装状态: ```bash vue -V ``` #### 四、不借助 Vue CLI 手动搭建 Webpack + Vue 项目 如果不希望通过官方脚手架来初始化工程结构,也可以考虑手动配置 webpack 和其他相关模块完成基础框架建设[^4]。这种做法适合高级开发者自定义需求场景下应用灵活调整策略: - 初始化 package.json 文件: ```bash npm init -y ``` - 添加所需库支持: ```bash npm install vue vue-loader css-loader style-loader babel-core babel-loader --save-dev ``` - 编写简单的 Webpack 配置文件(webapck.config.js),例如: ```javascript const path = require('path'); module.exports = { entry: './src/main.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js' } }, module: { rules: [ { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.(css|scss)$/, use: ['style-loader', 'css-loader'] } ] } }; ``` #### 结论 以上介绍了关于如何排查和解决围绕 `@vue/cli-service` 出现的一些典型问题及其替代方案。无论是升级依赖还是切换到更底层的手工设置流程都各有优劣,请依据实际业务背景做出合理抉择。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值