如何使用vue-cli4.x构建项目？

2023-11-15 20:43:19

站在前端开发的世界中，我们常常会听到“脚手架”这个名词。它就像一个勤劳的建筑工人，帮助我们省去繁琐的搭建工作，快速地为项目建立一个坚实的基础。而vue-cli4.x就是这样一个强大的脚手架，让我们一起探索如何使用它来构建Vue项目。

1. 安装vue-cli

首先，我们需要安装vue-cli4.x。可以使用以下命令进行安装：

npm install -g @vue/cli

或者使用yarn进行安装：

yarn global add @vue/cli

安装完成后，可以通过以下命令检查是否安装成功：

vue --version

如果看到版本号输出，就说明vue-cli4.x已经成功安装了。

2. 创建一个Vue项目

接下来，让我们创建一个新的Vue项目。可以使用以下命令：

vue create my-project

其中，“my-project”为你项目的名称。

3. 选择项目功能

在创建项目时，vue-cli会询问你是否需要添加一些额外的功能，如Eslint、单元测试或路由。根据自己的项目需求，选择需要的功能即可。

4. 安装项目依赖

当项目创建完成后，你需要安装项目依赖。可以使用以下命令：

cd my-project
npm install

或者使用yarn进行安装：

cd my-project
yarn install

5. 运行项目

安装完成后，就可以运行项目了。可以使用以下命令：

npm run serve

或者使用yarn进行运行：

yarn serve

项目运行后，就可以在浏览器中访问它了。默认情况下，项目运行在http://localhost:8080。

6. 代码结构

当你打开项目目录，你会看到以下文件结构：

my-project
├── package.json
├── README.md
├── src
│   ├── App.vue
│   ├── main.js
│   └── router.js
├── .babelrc
├── .eslintrc.js
├── .gitignore
├── package-lock.json
├── vue.config.js
└── yarn.lock