vue框架搭建步骤详解

首先，安装node.js

各种版本的node.js:https://nodejs.org/en/download/releases/

解释：

      百度百科：Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，即JavaScript的运行环境

      举一反三：JDK（包括JRE）或JRE是java的运行环境，我们想要运行java程序首先需要有java的运行环境。

      说明：新版的Node.js集成了npm，安装Node.js时会一起安装，直接npm -v命令，直接显示npm版本信息。npm的作用就是对Node.js依赖的包进行管理，也可以理解为用来安装/卸载Node.js需要装的东西

      问题：

      1.为什么我们需要一个包管理工具呢？

            因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用考虑代码存在哪，应该从哪下载。

      2.npm? cnpm?

            npm安装插件的时候是从国外服务器下载，受网络影响大，有些npm资源被屏蔽或者是国外资源的原因，经常会导致npm安装依赖包的时候失败

            cnpm淘宝团队做的国内镜像，因为npm的服务器位于国外可能会影响安装。

            安装cnpm命令：

npm install -g cnpm --registry=http://registry.npm.taobao.org

第二步，全局安装vue-cli

vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目

命令：cnpm install -g @vue/cli

1.可以通过命令查看你以前有没有安装过vue-cli

vue -V
//或者
vue -version

如果你电脑以前没安装过vue-cli，他会提示你XXX不是可识别的命令；反之，如果你的电脑以前安装过，他会查询出版本号

2.如过你之前已经安装过其他版本的vue-cli，你想安装新版本或者你指定版本的vu-cli，你需要通过命令卸载之前的，命令：

//卸载3.0之前的版本
npm uninstall -g vue-cli
//卸载3.0之后的版本（可以统一使用此指令卸载）
npm uninstall -g @vue/cli

3.如果你想要安装指定版本的vue-cli

//安装3.0以下版本，-g表示全局安装
npm install -g vue-cli
//安装3.0以下指定版本
npm install -g vue-cli@版本号

//安装3.0以上版本
npm install -g @vue/cli
//安装3.0以上指定版本
npm install -g @vue/cli@版本号

4.安装了vue-cli后会默认帮我们安装最新版本的vue，我们可以通过npm list vue命令查看默认安装的vue版本。如果我们不想要此版本的vue，我们可以另外安装我们指定版本的vue

npm install vue -g@版本号

第三步，搭建vue项目

      新建文件夹存放此前端项目，并cmd输入：

cnpm install -g @vue/cli-init

      新建 vue 项目：

//vue-cli2.x的初始化方式，可以使用githab上面的一些模板来初始化项目，webpack是官方推荐的标准模板名
vue init webpack 项目名称
//vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置
vue create 项目名称

      按照提示回答即完成vue框架搭建