使用vue-cli 3.x对项目进行初始化和配置
发布时间: 2023-12-21 06:11:30 阅读量: 12 订阅数: 10
# 1. 介绍
## 1.1 什么是vue-cli 3.x
Vue CLI是一个官方发布的用于快速搭建Vue.js项目的工具。从3.x版本开始,Vue CLI在体验和功能上都有了极大的改进,提供了更加现代化的项目配置和构建流程。
## 1.2 vue-cli 3.x相较于旧版本的改进和特点
- **图形化界面**:Vue CLI 3.x提供了图形化界面,让用户可以通过交互式的方式来创建和管理项目。
- **插件式架构**:新版的Vue CLI基于插件式架构,使得项目的配置和功能更加灵活、易于扩展。
- **可配置性**:通过可选的预设配置和插件,开发者可以快速搭建出适合自己项目需求的工程环境。
# 2. 安装和初始化
#### 2.1 安装Node.js和npm
在开始使用vue-cli 3.x之前,首先需要安装Node.js和npm。Node.js是一个基于Chrome V8引擎的JavaScript运行时,用于构建可扩展的网络应用程序。npm是Node.js的包管理器,用于安装和管理项目依赖。
##### 安装Node.js:
首先,访问 [Node.js官网](https://nodejs.org/) 下载最新的稳定版本,并按照安装提示进行安装。
##### 检查安装是否成功:
打开命令行工具,输入以下命令查看Node.js和npm的安装版本:
```bash
node -v
npm -v
```
如果成功显示相应的版本号,则表示安装成功。
#### 2.2 使用npm安装vue-cli 3.x
安装完Node.js和npm后,接下来通过npm安装vue-cli 3.x。
##### 全局安装vue-cli(前提是npm已经安装):
```bash
npm install -g @vue/cli
```
##### 检查安装是否成功:
输入以下命令检查是否安装成功:
```bash
vue --version
```
如果成功显示vue-cli的版本号,则表示安装成功。
#### 2.3 项目初始化
使用vue-cli 3.x创建新项目非常简单。
##### 创建新项目:
```bash
vue create my-project
```
在这里,`my-project` 是你的项目名称,你也可以选择手动配置项目的特性,如Babel、CSS预处理器、Linter/Formatter等。创建完成后,进入项目目录:
```bash
cd my-project
```
以上是安装和初始化vue-cli 3.x 的步骤,接下来就可以开始使用vue-cli 3.x构建强大的Vue.js应用程序了。
# 3. 项目配置
在使用vue-cli 3.x初始化项目后,我们可以对项目进行各种配置,以满足不同需求。本章将介绍项目配置的相关内容。
### 3.1 对项目编译、运行、打包等常用配置的解释和介绍
在vue-cli 3.x中,项目的常用配置都可以在根目录下的`vue.config.js`文件中进行修改。下面是一些常用的配置选项:
- `publicPath`: 配置项目的基础公共路径,用于部署时的路径前缀。
- `outputDir`: 配置项目的输出目录,默认为`dist`。
- `devServer`: 配置开发服务器相关的选项,例如端口号、代理等。
- `configureWebpack` 和 `chainWebpack`: 分别用于配置webpack的原始配置和更高级的链式配置。
- `css`、`lintOnSave`、`transpileDependencies`等选项用于配置样式、代码规范等方面的设置。
具体的配置选项和各自的含义可以参考官方文档,根据需要进行调整。
### 3.2 配置webpack插件和loader
在vue-cli 3.x中,借助webpack提供的插件和loader,我们可以灵活地定制项目构建流程。通过配置`vue.config.js`文件,我们可以添加额外的插件和loader。
下面是一个示例,配置了`vue-svg-loader`来处理SVG图片:
```javascript
// vue.config.js
module.exports = {
chainWeb
```
0
0