安装Vue CLI项目（Vue2.0）

一、Vue CLI脚手架（Vue2.0）

Vue CLI官方文档：官方文档

1.什么是脚手架

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

2.什么是Vue CLI

​ Vue CLI是一个基于Vue.js进行快速开发的完整系统。使用Vue脚手架后开发的页面将是一个完整系统（项目）

3.Vue CLI的优势

• 通过 vue-cli 实现的交互式的项目脚手架。

• 通过 vue-cli + vue-cli-service-global 实现的零配置原型开发。

• 一个运行时依赖 ( vue-cli-service )，该依赖：

  • 可升级；

  • 基于 webpack 构建，并带有合理的默认配置； （webpack项目打包方式，编译好的项目源码直接部署到服务器上）

  • 可以通过项目内的配置文件进行配置；（默认配置文件，通过修改默认配置文件达到自己想要的环境）

  • 可以通过插件进行扩展。（vue v-charts、elementui）

• 一个丰富的官方插件集合，集成了前端生态中最好的工具。（服务器:node.js 前后端分离：Vue VueRouter 打包方式：webpack、yarn）

• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

---

4.Vue CLI的安装

4.1.环境准备

npm介绍：node package manager node.js包管理工具

​ 1.下载node.js https://nodejs.org/zh-cn/download/

​ windows系统：.msi安装包或.zip压缩包

（安装目录或解压目录根据实际情况安装，不推荐装在c盘）

​ 2.配置环境变量

2.1.在环境变量新建路径：

​ NODE_HOME = node.js安装目录的路径

2.2.在path变量中新增NODE_HOME路径：

​ PATH = %NODE_HOME%

​ 3.验证node.js环境是否安装成功

​ node -v

​ 4.配置淘宝镜像

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

4.1.查看镜像路径：

​ npm config get registry

因为淘宝镜像将在 2022.06.30 号正式下线和停止 DNS 解析
之后命令的镜像域名更改为：

npm config set registry http://registry.npmmirror.com

域名切换规则：

• http://npm.taobao.org => http://npmmirror.com
• http://registry.npm.taobao.org => http://registry.npmmirror.com

​ 5.配置npm下载依赖位置

​ npm config set cache “D:\nodereps\npm-cache”

​ npm config set prefix “D:\nodereps\npm_global”

​ 6.验证node.js环境配置

​ npm config ls

4.2.安装脚手架

Vue CLI2.x官方网站：https://cli.vuejs.org/zh/guide/

​ 0.卸载脚手架

• npm uninstall -g @vue/cli //卸载3.x版本脚手架
• npm uninstall -g vue-cli //卸载2.x版本脚手架

​ 1.安装脚手架

• npm install -g vue-cli

4.3.创建vue脚手架项目

1.创建项目

• vue init webpack 项目名

2.运行项目

• npm start 运行前端系统（在项目的根目录中运行项目）

3.运行路径

• http://localhost:8080

4.项目目录

• build --------> 用来使用webpack打包使用build依赖

• config --------> 用来做整个项目配置目录

• node_modules --------> 用来管理项目中的依赖

• src --------> 用来书写Vue的源代码

  • assets --------> 用来存放静态资源（image、css等）
  • components --------> 用来书写Vue组件
  • router --------> 用来配置项目中的路由
  • App.vue --------> 项目中的根组件
  • main.js --------> 项目中的主入口

• static --------> 其它静态

• .babelrc --------> 将es6语法转为es5语法运行

• .editotconfig --------> 项目编辑配置

• .gitignore --------> git版本控制忽略文件

• .postcssrc.js --------> 源码相关js

• index.html --------> 项目主页

• package.json --------> 依赖管理

• package-lock.json --------> 对package.json加锁

• README.md --------> 项目说明文件