Vue简明实用教程(16)——Vue CLI开发环境搭建

Posted 2022-02-01 谷哥的小弟

---

版权声明

• 本文原创作者：谷哥的小弟
• 作者博客地址：http://blog.csdn.net/lfdfhl

---

Vue CLI概述

命令行界面（英语：command-line interface，缩写：CLI）是在图形用户界面得到普及之前使用最为广泛的用户界面，它通常不支持鼠标，用户通过键盘输入指令，计算机接收到指令后，予以执行；也有人称之为字符用户界面（CUI）。

通常认为，命令行界面（CLI）没有图形用户界面（GUI）那么方便用户操作。因为，命令行界面的软件通常需要用户记忆操作的命令，但是，由于其本身的特点，命令行界面要较图形用户界面节约计算机系统的资源。

Vue CLI 是一个基于 Vue.js 进行前端快速开发的脚手架(框架)。

官方地址：

https://cli.vuejs.org/zh/

特点与优势：

• 1、功能丰富、操作简单
• 2、便于扩展、易于升级
• 3、插件丰富、生态良好

在使用Vue CLI之前，我们需要安装和配置nodejs

nodejs安装

在此，详细介绍nodejs的安装过程。

下载

请在官方http://nodejs.cn/download/下载nodejs保存至本地并解压。

配置环境变量

接下来，为nodejs配置环境变量。

配置NODE_HOME

该变量的值为nodejs的安装目录，例如：

D:\\nodejs\\node-v16.13.0-win-x64

配置Path

请在Path中追加nodejs的路径，例如：

;%NODE_HOME%

验证配置

请在dos窗口中使用node -v验证nodejs是否安装成功。

nodejs配置

在此，详细介绍nodejs的配置过程。

npm

node package mangager简称npm，它常被称为nodejs包管理工具。通过npm命令可以统一管理前端所需依赖。从依赖管理的角度来讲，npm非常类似于Maven。

配置镜像

为了提升依赖效率，为nodejs配置国内的镜像，命令如下：

npm config set registry https://registry.npm.taobao.org

查看镜像，命令如下：

npm config get registry

配置本地仓库

在本地创建nodejsrepository文件夹并在Path中追加与本地仓库相关的配置

; D:\\nodejsrepository

在nodejsrepository下创建node_cache文件夹和node_global文件夹作为nodejs的本次仓库。

配置nodejs的本地仓库，命令如下：

npm config set cache "D:\\nodejsrepository\\node_cache"

npm config set prefix "D:\\nodejsrepository\\node_global"

验证nodejs配置

至此，我们完成了nodejs的安装和配置；验证命令如下：

npm config ls

Vue CLI入门示例

在此，以图文形式详细介绍Vue CLI的入门。

安装Vue CLI

请安装Vue CLI，命令如下：

npm install -g vue-cli

注意，安装Vue CLI时可能较为耗时请耐心等待。

执行完该命令后，在node_global文件夹下成功安装了Vue CLI。

接下来，请将vue.cmd的路径追加至Path中：

;D:\\nodejsrepository\\node_global

在此，可以利用vue -V验证Vue CLI安装是否成功。

类似地，我们可使用npm uninstall卸载Vue CLI，命令如下：

npm uninstall -g vue-cli

切换目录

在本地E:\\Dropbox\\phoenix中创建VueCLIProjects文件夹用于存放项目。

利用cd命令切换至创建Vue CLI项目的文件夹的命令如下：

C:\\Users\\yy>E:

E:\\>cd E:\\Dropbox\\phoenix\\VueCLIProjects

E:\\Dropbox\\phoenix\\VueCLIProjects>

创建项目

命令如下：

vue init webpack 项目名(请勿包含大写字母)

示例如下：

vue init webpack helloworld

注意，创建Vue CLI项目时可能较为耗时请耐心等待。


注意，安装Vue CLI时可能较为耗时请耐心等待。

至此，项目已经创建完毕。

运行项目

请切换至项目文件夹下。

cd helloworld

运行项目，命令如下：

npm run dev

请在浏览器中输入 http://localhost:8080 访问项目。

Vue CLI项目目录结构

在此，我们以刚才创建的helloworld说明Vue CLI项目的目录结构。

build

存放与webpack相关的配置。例如：测试环境、开发环境相关的配置。

config

项目配置文件

node_modules

保存项目所需的js依赖

src

src目录是项目目录结构中的核心。

assets

存放静态资源

components

存放组件

router

配置项目路由

App.vue

根组件

main.js

项目主入口

static

存放静态资源，较少使用。

index.html

当前项目的唯一页面，即项目主页。

package.json

类似于pom.xml，用于管理文件依赖

package-lock.json

对package.json加锁

README.md

项目说明文件