从0开始搭建vue-cli项目以及初始化工程

2023-12-29 19:29:40

准备工作

在开始搭建项目之前，请确保您的系统满足以下要求：

Node.js 版本 >= 10.0
npm 版本 >= 5.0
Vue CLI 版本 >= 3.0

您还可以使用以下命令检查您的系统是否满足要求：

node -v
npm -v
vue -v

项目搭建

1. 安装Vue CLI

首先，需要安装Vue CLI工具，它可以帮助您快速创建一个新的Vue.js项目。您可以通过以下命令安装Vue CLI：

npm install -g @vue/cli

2. 创建项目

安装好Vue CLI之后，就可以创建一个新的Vue.js项目了。您可以通过以下命令创建一个名为“my-project”的项目：

vue create my-project

3. 进入项目目录

使用以下命令进入项目目录：

cd my-project

4. 运行项目

使用以下命令运行项目：

npm run serve

项目运行后，您可以在浏览器中访问http://localhost:8080来查看项目。

工程初始化

在项目创建完成后，可以进行一些必要的初始化工作，包括：

1. 项目结构

Vue.js项目通常有以下目录结构：

├── node_modules
├── src
│   ├── App.vue
│   ├── main.js
│   ├── components
│   │   └── HelloWorld.vue
│   ├── views
│   │   └── Home.vue
│   └── assets
│       ├── css
│       └── img
└── public
    ├── index.html
    ├── favicon.ico
    └── manifest.json

2. 命令行工具

Vue CLI提供了一系列命令行工具，可以帮助您进行各种开发任务。这些工具包括：

vue init         # 创建新的项目
vue serve        # 启动开发服务器
vue build        # 构建项目
vue test         # 运行单元测试
vue lint         # 检查代码质量
vue inspect      # 查看项目配置