安装vue-cli出现的错误并用其创建项目

本文档详细介绍了在安装Vue CLI时遇到的错误及其解决方案,包括删除node_cache和node_global文件夹后重新执行安装命令。同时,指导了如何使用Vue CLI创建项目,从选择项目目录到配置选项的步骤。遇到的错误提示是由于缺少Git用户名和邮箱,通过gitconfig设置后可解决。最后,成功创建项目并启动,通过浏览器访问http://localhost:8080/查看。

1.安装过程中出现的错误:
在这里插入图片描述
解决办法:在安装node.js的文件夹中,找到node_cache(node缓存文件夹)跟node_global(全局安装是安装在node_global目录下的)两个文件夹下的内容全部删除
再次执行 npm i -g @vue/cli 就可以了
在这里插入图片描述
输入vue -V,出现如下结果说明安装成功。
在这里插入图片描述
2.用vue-cli创建一个项目。
(1)首先找到想要创建项目的文件目录,点击空白处,输入cmd
在这里插入图片描述
(2)在跳出的控制台上输入vue create demo-first(文件名字),敲回车
(3)初学者选第三个,自己手动选择要安装那些功能。
在这里插入图片描述
(4)按上下键选择,选中的话按“空格”键选中或者撤销。
在这里插入图片描述
(5)在这里插入图片描述
(6)红线表示把Babel,ESlint等插件的配置项,放到自己独立的配置文件中。在这里插入图片描述
(7)再创建过程中,如果不小心点中屏幕任意的位置,项目的创建就会自动停止,这时候要“轻点屏幕任意一个位置,然后按下Ctrl+C,项目就会接着运行”。
在这里插入图片描述

出现的错误提示:
在这里插入图片描述
上述错误会使创建的项目打开变成这个样子。

解决办法:终端配置自己的git用户名和邮箱

git config --global user.name “myb”
git config --global user.email “email”

(这里的myb是你想要输入的用户名,email是你想要设定的邮箱)

配置好之后可以通过在终端输入查看自己的用户名和邮件

git config user.name
git config user.email
在这里插入图片描述
配置完git的用户名和邮箱后,然后重新创建一个项目。
在这里插入图片描述
在这里插入图片描述
打开vscode一切正常。
在这里插入图片描述

(8)在屏幕输入cd demo-first
npm run serve
出现如下结果:
在这里插入图片描述
在浏览器输入:http://localhost:8080/
在这里插入图片描述

### Vue CLI 安装项目创建、自定义配置及运行步骤 #### 环境准备 确保已安装 Node.js 和 npm。可以通过以下命令验证是否已正确安装: ```bash node -v npm -v ``` 如果未安装,请访问 [Node.js 官方网站](https://nodejs.org/) 下载并安装[^1]。 #### 安装 Vue CLI 通过 npm 全局安装 Vue CLI 工具,用于快速生成和管理 Vue 项目: ```bash npm install -g @vue/cli ``` 安装完成后,验证 Vue CLI 是否成功安装: ```bash vue --version ``` #### 创建 Vue 项目 使用 Vue CLI 创建项目。运行以下命令以启动交互式项目创建向导: ```bash vue create my-vue-project ``` 在交互式界面中,可以选择默认配置或手动选择特性(如 TypeScript、Router、Vuex 等)[^2]。 #### 自定义配置 进入项目目录后,可以对项目进行自定义配置。主要的配置文件包括 `vue.config.js` 和 `package.json`。 - **vue.config.js**:用于配置 Webpack 的扩展选项。例如,修改构建输出路径或代理设置: ```javascript module.exports = { publicPath: './', // 构建后的资源路径 devServer: { proxy: 'http://localhost:3000' // 开发服务器代理设置 } }; ``` - **package.json**:定义项目的依赖项和脚本。可以通过编辑此文件添加自定义脚本: ```json "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" } ``` #### 打开项目 进入项目目录并用 Visual Studio Code 打开: ```bash cd my-vue-project code . ``` #### 安装依赖 首次打开项目时,确保所有依赖项已正确安装。如果未自动安装,可以运行以下命令: ```bash npm install ``` #### 启动开发服务器 运行以下命令以启动本地开发服务器: ```bash npm run serve ``` 浏览器将自动打开,默认地址为 `http://localhost:8080`。如果端口被占用,可以在命令行中查看实际地址[^3]。 #### 配置 VS Code 为了提高开发效率,建议进行以下配置: - **安装扩展**:推荐安装 Volar 或 Vetur 扩展以获得语法高亮、代码补全和错误提示功能。 - **格式化工具**:安装 Prettier 并将其设置为默认格式化工具。在 VS Code 设置中添加以下配置: ```json { "editor.defaultFormatter": "esbenp.prettier-vscode", "prettier.singleQuote": true, "prettier.semi": false } ``` #### 构建生产版本 完成开发后,可以构建生产版本。运行以下命令: ```bash npm run build ``` 生成的文件将位于 `dist` 目录中,可以直接部署到服务器。 ### 注意事项 - 如果遇到依赖问题,请尝试删除 `node_modules` 文件夹并重新安装依赖: ```bash rm -rf node_modules npm install ``` - 确保 VS Code 的 ESLint 插件已启用,以便实时检查代码质量问题。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值