Vue-Cli构建项目

## 一、Vue-Cli介绍

Vue-Cli官网：[Home | Vue CLI](https://cli.vuejs.org/zh/)

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

- 通过 `@vue/cli` 实现的交互式的项目脚手架。
- 通过 `@vue/cli` + `@vue/cli-service-global` 实现的零配置原型开发。
- 一个运行时依赖 (`@vue/cli-service`)，该依赖：
  - 可升级；
  - 基于 webpack 构建，并带有合理的默认配置；
  - 可以通过项目内的配置文件进行配置；
  - 可以通过插件进行扩展。
- 一个丰富的官方插件集合，集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

## 二、Node.js安装

要使用到的NPM(Node Package Manager)是随同Node.js一起安装的包管理工具，与Maven类似，它可以快速安装和搭建前端的项目。

#### 1、安装包安装

Node.js官网下载：[Node.js — Download Node.js®](https://nodejs.org/en/download/)

![image-20251028143817248](https://pic.soki.me/file/piclist/image-20251028143817248.png)

下载完安装包后直接一直`Next`即可完成安装。

#### 2、验证安装

在终端中输入下面命令回车

```bash
node -v
npm -v
```

安装成功如图

![image-20251028144137136](https://pic.soki.me/file/piclist/image-20251028144137136.png)

## 三、全局安装Vue-Cli

#### 1、安装

在终端中输入下面的命令中其中一条，就可以直接安装

```bash
## 安装最新的Vue-Cli版本
npm install -g @vue/cli
## 安装指定版本的Vue-Cli,下面的x.x.x替换成具体安装的版本号
npm install -g @vue/cli@x.x.x
```

安装成功会出现下图提示

![image-20251028144625413](https://pic.soki.me/file/piclist/image-20251028144625413.png)

#### 2、查看Vue-Cli的所有版本号

```bash
npm view @vue/cli versions --json
```

#### 3、卸载Vue-Cli

```bash
npm uninstall vue-cli -g
```

## 四、Vue-Cli工程

#### 0、使用WebStorm创建

创建项目选择`Vue.js`工程，选择本地的Node解释器与Vue-Cli，并且取消勾选`使用默认项目设置`，后续步骤与操作与下面步骤一致

![image-20251028162623199](https://pic.soki.me/file/piclist/image-20251028162623199.png)

#### 1、创建工程

在需要创建工程的文件夹中打开终端(终端内的路径是即将要创建的路径)

输入下面命令创建工程

```bash
vue create [工程名]
```

**注意**：Vue-Cli工程名一律为小写

若网络环境不好则会提示

![image-20251028145754209](https://pic.soki.me/file/piclist/image-20251028145754209.png)

##### 选择工程模板

选择最后一个自定义模板

![image-20251028145856715](https://pic.soki.me/file/piclist/image-20251028145856715.png)

##### 选择自定义模块

用空格选中或取消选中，只选择1，4，回车确认

![image-20251028150229821](https://pic.soki.me/file/piclist/image-20251028150229821.png)

##### 选择Vue基础版本

选中Vue3

![image-20251028150325586](https://pic.soki.me/file/piclist/image-20251028150325586.png)

##### 选择路由方式

Y：表示用history方式路由；n：表示用Hash方式路由，一般选择n

![image-20251028150405746](https://pic.soki.me/file/piclist/image-20251028150405746.png)

##### 选择配置文件存放方式

选择`package.json`

![image-20251028150620001](https://pic.soki.me/file/piclist/image-20251028150620001.png)

##### 选择是否保存模板

![image-20251028150702392](https://pic.soki.me/file/piclist/image-20251028150702392.png)

##### 安装依赖时使用的工具

选择NPM

![image-20251028151005044](https://pic.soki.me/file/piclist/image-20251028151005044.png)

##### 创建成功

![image-20251028151240824](https://pic.soki.me/file/piclist/image-20251028151240824.png)

#### 2、运行工程

##### 使用命令行

可以在命令行中直接输入

```bash
cd hello
npm run serve
```

![image-20251028162907090](https://pic.soki.me/file/piclist/image-20251028162907090.png)

打开http://localhost:8080/即可

##### 使用WebStorm

选择编辑配置

![image-20251028163309030](https://pic.soki.me/file/piclist/image-20251028163309030.png)

选择添加npm在右面`脚本`添加如图信息即可

![image-20251028163404166](https://pic.soki.me/file/piclist/image-20251028163404166.png)

#### 3、目录结构

```cmd
vue3-project/
├── public/                 # 静态资源目录
│   ├── index.html         # HTML模板
│   └── favicon.ico        # 网站图标
├── src/                   # 源代码目录
│   ├── assets/            # 静态资源（图片、样式等）
│   ├── components/        # 可复用组件
│   ├── views/             # 页面级组件
│   ├── router/            # 路由配置
│   ├── store/             # 状态管理（Vuex）
│   ├── App.vue            # 根组件
│   └── main.js            # 入口文件
├── package.json           # 项目配置和依赖
├── vue.config.js          # Vue CLI配置
└── babel.config.js        # Babel配置
```

#### 4、Vue所需模块的安装

当`node_modules`文件夹丢失或损坏时，只需要在有`package.json`文件的目录下执行下面命令

```bash
npm install
```

即可自动根据依赖完成模块安装。

#### 5、修改默认端口

修改`vue.config.js`文件

将运行端口默认改为`8081`

```js
const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
        port: 8081
    }
})
```

## 五、TodoList案例

#### 1、创建Vue工程

工程名称：todolist

步骤同上

#### 2、编辑组件

删除`HelloView.vue`、`AboutView.vue`、`HelloWorld.vue`

创建`TodoList.vue`

```html
<template>
<div>
    todolist
</div>
</template>

</style>
```

修改`router/index.js`

```js
import { createRouter, createWebHashHistory } from 'vue-router'
import TodoList from '../views/TodoList.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: TodoList
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router
```

修改`App.Vue`

```html
<template>
  <router-view/>
</template>

#### 3、共通组件AddNew

```html
<template>
    <div>
        <input type="text" v-model="newItem">
        <button @click="handleAdd">添加</button>
    </div>
</template>

button {
    border: none;
    outline: none;
    width: 80px;
    height: 36px;
    background-color: #42b983;
    border-radius: 10px;
    margin-left: 10px;
    color: #fff;
}

button:hover{
    background-color: #34e590;
}
</style>
```

**注意**：在`<style>`标签中若有`scoped`标记则代表该样式表只用于单个组件

#### 4、共通组件DoList

```html
<template>
    <div>
        <ol reversed>
            <li v-for="(item,index) in list" :key="index" @click="judgeItem(index)">
                <span v-text="item"></span>
            </li>
        </ol>
    </div>
</template>

ol li{
    cursor: pointer;
}
</style>
```

#### 5、修改TodoList.vue

```html
<template>
    <div>
        <h1>TodoList</h1>
        <AddNew @submitNew="addNewItem"></AddNew>
        <DoList :list="todoList" @handleJudge="judgeItem"></DoList>
        <hr/>
        <DoList :list="doneList" :listType="true" @handleDelete="deleteItem"></DoList>
    </div>
</template>

export default {
    name: "TodoList",
    components: {
        AddNew,
        DoList
    },
    data() {
        return {
            todoList: [], // 待办事项
            doneList: []  // 完成事项
        }
    },
    methods: {
        addNewItem(newItem) {
            this.todoList.unshift(newItem);
        },
        deleteItem(index) {
            this.doneList.splice(index, 1);
        },
        judgeItem(index) {
            this.doneList.unshift(this.todoList.splice(index,1)[0]);
        }
    }
}
</script>

</style>
```

## 六、Vue-Cli打包

#### 1、打包配置

修改`Vue.config.json`文件，追加以下属性

```js
// 打包基本目录(相对路径/绝对路径)
publicPath: './',
// 输出目录
outputDir: 'dist',
// 静态资源目录
assetsDir: 'assets'
```

#### 2、进行打包

终端输入以下命令运行即可

```bash
npm run build
```

成功如下图

![image-20251029124500653](https://pic.soki.me/file/piclist/image-20251029124500653.png)

## 一、Vue-Cli介绍

Vue-Cli官网：[Home | Vue CLI](https://cli.vuejs.org/zh/)

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

## 二、Node.js安装

要使用到的NPM(Node Package Manager)是随同Node.js一起安装的包管理工具，与Maven类似，它可以快速安装和搭建前端的项目。

#### 1、安装包安装

Node.js官网下载：[Node.js — Download Node.js®](https://nodejs.org/en/download/)

![image-20251028143817248](https://pic.soki.me/file/piclist/image-20251028143817248.png)

下载完安装包后直接一直`Next`即可完成安装。

#### 2、验证安装

在终端中输入下面命令回车

```bash
node -v
npm -v
```

安装成功如图

![image-20251028144137136](https://pic.soki.me/file/piclist/image-20251028144137136.png)

## 三、全局安装Vue-Cli

#### 1、安装

在终端中输入下面的命令中其中一条，就可以直接安装

```bash
## 安装最新的Vue-Cli版本
npm install -g @vue/cli
## 安装指定版本的Vue-Cli,下面的x.x.x替换成具体安装的版本号
npm install -g @vue/cli@x.x.x
```

安装成功会出现下图提示

![image-20251028144625413](https://pic.soki.me/file/piclist/image-20251028144625413.png)

#### 2、查看Vue-Cli的所有版本号

```bash
npm view @vue/cli versions --json
```

#### 3、卸载Vue-Cli

```bash
npm uninstall vue-cli -g
```

## 四、Vue-Cli工程

#### 0、使用WebStorm创建

创建项目选择`Vue.js`工程，选择本地的Node解释器与Vue-Cli，并且取消勾选`使用默认项目设置`，后续步骤与操作与下面步骤一致

![image-20251028162623199](https://pic.soki.me/file/piclist/image-20251028162623199.png)

#### 1、创建工程

在需要创建工程的文件夹中打开终端(终端内的路径是即将要创建的路径)

输入下面命令创建工程

```bash
vue create [工程名]
```

**注意**：Vue-Cli工程名一律为小写

若网络环境不好则会提示

![image-20251028145754209](https://pic.soki.me/file/piclist/image-20251028145754209.png)

##### 选择工程模板

选择最后一个自定义模板

![image-20251028145856715](https://pic.soki.me/file/piclist/image-20251028145856715.png)

##### 选择自定义模块

用空格选中或取消选中，只选择1，4，回车确认

![image-20251028150229821](https://pic.soki.me/file/piclist/image-20251028150229821.png)

##### 选择Vue基础版本

选中Vue3

![image-20251028150325586](https://pic.soki.me/file/piclist/image-20251028150325586.png)

##### 选择路由方式

Y：表示用history方式路由；n：表示用Hash方式路由，一般选择n

![image-20251028150405746](https://pic.soki.me/file/piclist/image-20251028150405746.png)

##### 选择配置文件存放方式

选择`package.json`

![image-20251028150620001](https://pic.soki.me/file/piclist/image-20251028150620001.png)

##### 选择是否保存模板

![image-20251028150702392](https://pic.soki.me/file/piclist/image-20251028150702392.png)

##### 安装依赖时使用的工具

选择NPM

![image-20251028151005044](https://pic.soki.me/file/piclist/image-20251028151005044.png)

##### 创建成功

![image-20251028151240824](https://pic.soki.me/file/piclist/image-20251028151240824.png)

#### 2、运行工程

##### 使用命令行

可以在命令行中直接输入

```bash
cd hello
npm run serve
```

![image-20251028162907090](https://pic.soki.me/file/piclist/image-20251028162907090.png)

打开http://localhost:8080/即可

##### 使用WebStorm

选择编辑配置

![image-20251028163309030](https://pic.soki.me/file/piclist/image-20251028163309030.png)

选择添加npm在右面`脚本`添加如图信息即可

![image-20251028163404166](https://pic.soki.me/file/piclist/image-20251028163404166.png)

#### 3、目录结构

#### 4、Vue所需模块的安装

当`node_modules`文件夹丢失或损坏时，只需要在有`package.json`文件的目录下执行下面命令

```bash
npm install
```

即可自动根据依赖完成模块安装。

#### 5、修改默认端口

修改`vue.config.js`文件

将运行端口默认改为`8081`

```js
const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
        port: 8081
    }
})
```

## 五、TodoList案例

#### 1、创建Vue工程

工程名称：todolist

步骤同上

#### 2、编辑组件

删除`HelloView.vue`、`AboutView.vue`、`HelloWorld.vue`

创建`TodoList.vue`

```html
<template>
<div>
    todolist
</div>
</template>

</style>
```

修改`router/index.js`

```js
import { createRouter, createWebHashHistory } from 'vue-router'
import TodoList from '../views/TodoList.vue'

const routes = [
  {
    path: '/',
    name: 'home',
    component: TodoList
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router
```

修改`App.Vue`

```html
<template>
  <router-view/>
</template>

#### 3、共通组件AddNew

```html
<template>
    <div>
        <input type="text" v-model="newItem">
        <button @click="handleAdd">添加</button>
    </div>
</template>

button {
    border: none;
    outline: none;
    width: 80px;
    height: 36px;
    background-color: #42b983;
    border-radius: 10px;
    margin-left: 10px;
    color: #fff;
}

button:hover{
    background-color: #34e590;
}
</style>
```

**注意**：在`<style>`标签中若有`scoped`标记则代表该样式表只用于单个组件

#### 4、共通组件DoList

ol li{
    cursor: pointer;
}
</style>
```

#### 5、修改TodoList.vue

</style>
```

## 六、Vue-Cli打包

#### 1、打包配置

修改`Vue.config.json`文件，追加以下属性

```js
// 打包基本目录(相对路径/绝对路径)
publicPath: './',
// 输出目录
outputDir: 'dist',
// 静态资源目录
assetsDir: 'assets'
```

#### 2、进行打包

终端输入以下命令运行即可

```bash
npm run build
```

成功如下图

![image-20251029124500653](https://pic.soki.me/file/piclist/image-20251029124500653.png)

最后修改：2025 年 10 月 29 日

👆请简单粗暴地爱我。

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Spring框架依赖注入

MySQL知识扩展

Day12 - JDBC驱动安装及其简单使用方法

Java常用注解表

Electron的简介

Java的Lambda表达式解析

Spring框架依赖注入

MyBatis框架进阶

SpringCloud延迟与容错

Day7 - Java中运行时异常与处理方法

Vue-Cli构建项目

发表评论 取消回复 使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款

Vue-Cli构建项目

发表评论取消回复
使用cookie技术保留您的个人信息以便您下次快速评论，继续评论表示您已同意该条款