Vue学习笔记进阶篇之vue-cli安装及介绍

Vue学习笔记进阶篇：vue-cli的安装与介绍

=======================

一、介绍

-

Vue-cli是Vue.js的脚手架工具，它简化了Vue项目的创建和管理流程。其主要功能包括目录结构生成、本地调试、代码部署、热加载以及单元测试等。安装和使用Vue-cli可以极大地提高开发者的效率。

二、安装

-

要开始使用Vue-cli，首先需要在计算机上安装Node.js环境。一旦Node.js安装完成，就可以全局安装vue-cli了。

在终端输入以下命令来安装vue-cli：

```bash

npm install -g vue-cli

```

安装完成后，输入`vue -V`可以查看vue的版本。

三、模板介绍

运行`vue list`命令，可以查看官方提供的模板列表。Vue官方目前提供了六个模板，其中webpack模板是最常用的一个。

Webpack可以看做是模块打包机，它的作用是将项目中的JavaScript模块以及其他浏览器不能直接运行的拓展语言（如Scss，TypeScript等）打包成浏览器可以理解的格式。

四、创建项目

使用Vue-cli创建项目的命令为：

```bash

vue init

```

其中，``是模板名称，可以从`vue list`命令查到的模板中选择；``是项目名称，需自行定义，不能为中文。

以创建一个名为"my-demo1"的项目为例，执行以下命令：

```bash

vue init webpack my-demo1

```

创建完成后，进入项目目录：

```bash

cd my-demo1

```

然后安装项目依赖：

```bash

npm install

```

运行项目：

```bash

npm run dev

```

这将会启动一个热加载的服务器，每当项目文件发生改变时，浏览器会自动刷新显示的改动。

五、项目目录介绍与运行配置

项目目录结构大致如下：

build、config：这两个目录是webpack以及node服务器的配置。

node_modules：这个目录是npm install命令执行后安装的依赖项所在目录。

src：用来存放项目代码，我们的开发工作主要在这个目录中进行。

.babelrc、.editorconfig等：这些文件都是项目的配置文件。

index.html：项目入口模板文件。

package.json：node配置文件。

要修改项目的运行端口号，可以在config/index.js文件下找到相关配置进行修改，然后重新运行项目即可。

六、总结与拓展学习建议 ── 狼蚁网站SEO优化之旅启程！