Vue学习—详解利用脚手架搭建项目

发布日期：2021-05-08 04:58:03 浏览次数：29 分类：精选文章

本文共 1342 字，大约阅读时间需要 4 分钟。

利用 Vue CLI 搭建项目

安装 Vue CLI

检查 Node.js 版本

确保已安装 Node.js，版本要求为 >8.9，推荐使用 8.11.0 及以上版本。

卸载旧版本

如果之前已全局安装过 Vue CLI（1.x 或 2.x），请先卸载：

npm uninstall vue-cli -g

或使用 Yarn：

yarn global remove vue-cli

安装最新版本

运行以下命令安装 Vue CLI：

npm install -g vue@latest

或使用 Yarn：

yarn global add vue@latest

验证安装

确认 Vue CLI 是否正确安装：

vue --version

预期输出示例：

vue 3.0.0

注意：如果需要特定版本，例如 Vue CLI 2.x，需单独指定版本号。

使用命令搭建项目

方法一：命令行搭建

初始化新项目

运行以下命令开始创建项目：

vue create my_project

使用默认配置，按下、上箭头键选择。

回车确认完成。

配置项目插件

选择要安装的插件（如 Babel、eslint 等），按空格键选择，回车继续：

插件配置示例：

vue create my_project --no-strict --template babel

生成 package.json 文件后，继续运行：

cd my_project && npm install

启动开发服务器

运行以下命令启动项目：

npm run dev

项目即将在浏览器中自动打开，默认地址为 http://localhost:8080。

方法二：图形界面搭建（不推荐）

启动图形界面

使用以下命令启动 Vue CLI 的图形界面：

vue ui

浏览器会自动打开页面。

配置项目

在界面中按照指引设置项目信息，步骤与命令行类似。

注意：作为开发者，推荐使用命令行方式进行配置，图形界面适合初次接触的用户，但不适合日常开发。

删除配置

清除缓存

如果希望清除 Vue CLI 的默认配置，首先关闭正在运行的项目。

删除配置文件

打开用户的 package.json 文件，删除其中的 vue 配置部分：

{  "name": "my_project",  "version": "1.0.0",  "private": true,  "dependencies": {    "vue": "^3.0.0"  },  "scripts": {    "serve": "vue serve",    "build": "vue build",    "preview": "vue preview"  }}

删除后，新项目将使用默认配置。

常见问题

安装失败

如果安装过程中出现错误，检查网络连接或 Node.js 是否已正确安装。

配置错误

在 package.json 中无法找到配置文件？重新运行创建命令：

vue create my_project --force

启动服务器问题

如果项目无法自动打开浏览器，手动访问 http://localhost:8080。

通过以上步骤，你可以轻松利用 Vue CLI 搭建并开发项目。

上一篇：Vue学习—深入剖析渲染函数

下一篇：Vue练习—树形组件

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！