一、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 --------> 项目说明文件

安装Vue CLI项目（Vue2.0）相关推荐

离线安装vue脚手架，内网安装@vue/cli
公司开发环境使用内网,无法用外网,搭建环境的时候,发现内网系统没有安装vue脚手架,我搜了很多文章,发现他们的方法对我都不适用,然后就自己摸索,最终皇天不负有心人,终于被我安装上了,一下是我内网离线安 ...
vue cli项目升级--vue cli3升级到vue cli4
原文网址:vue cli项目升级--vue cli3升级到vue cli4_IT利刃出鞘的博客-CSDN博客简介说明本文介绍如何升级vue项目的vue cli版本. 官方网址 https://c ...
Vue项目9：Vue Cli项目使用echarts可视化
Vue Cli项目使用echarts可视化有两种方式:一.直接引入echarts 二.使用vue-ehcarts. 一.直接引入echarts 1.创建Vue Cli项目进入cmd命令行,输入如 ...
脚手架创建项目vue2.0
脚手架创建项目vue2.0 下载: npm i - g vue npm i - g vue-cli npm i -g webpack 检测下载版本 vue -V webpack -V 初始化项目 vu ...
Mac 环境安装 Vue Cli
一.检查 Node 环境 node -v npm -v 如果没有 Node 环境,则需要先安装,可以直接到 Node.js 中文网下载. 快速链接 Node.js 中文网 >>> 二 ...
使用Yarn全局安装@vue/cli，无法执行vue命令的解决方案
使用Yarn全局安装@vue/cli,无法执行vue命令的解决方案使用Yarn全局安装@vue/cli,无法执行vue命令的解决方案使用Yarn全局安装@vue/cli,无法执行vue命令的解决方 ...
vue cli 项目在打包时候报错 API fatal error handler returned after process out of memory
问题描述 vue cli 项目在打包时候报错:API fatal error handler returned after process out of memory. 问题分析从给出的提示可以看出 ...
[vue] 你知道vue2.0兼容IE哪个版本以上吗？
[vue] 你知道vue2.0兼容IE哪个版本以上吗? 双向绑定的原理是基于Object,defineProperty的,ie8及以下不兼容这个api.另外还有一些特性至少在ie10才能用,我们已经弃 ...
yarn全局安装vue/cli vue不是内部命令
yarn全局安装vue/cli vue不是内部命令在使用 yarn global add @vue/cli安装 @vue/cli之后执行vue --version 报错:'vue' 不是内部或外部 ...

安装Vue CLI项目（Vue2.0）