Vue.js安装步骤详解

Vue.js安装步骤详解

1.安装node.js

从node.js官网下载安装包。官网地址：https://nodejs.org/en/

下载圆圈中的这个大多数人选择的版本就行。右边那个是最新的版本，不推荐。
下载过程：一直点击 next 就行了。可以自己更换存储路径。

1.1 打开命令提示符工具 win+R 查看node的版本号 node -v

1.2 安装了node也会有npm,npm是集成在node中的。输入命令 npm -v 显示npm的版本信息。

到现在，node环境就已经安装好了，npm管理器也有了。

2.安装cnpm

由于npm资源有时候是国外的会被屏蔽，导致npm安装依赖包失败，所以我们需要安装cnpm(国内淘宝的镜像）
直接在命令提示行输入： cnpm config set registry https://registry.npm.taobao.org 命令。

如果在执行 cnpm config set registry https://registry.npm.taobao.org 出错。关掉命令提示框，以管理员身份运行

3.安装脚手架 vue-cli

在命令行执行 cnpm install -g vue-cli 命令。

通过以上三个步骤，我们所需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。

4.创建一个基于 webpack 模板的新项目

4.1 首先，选择项目位置，比如我选择D盘，执行 d：
4.2 查看D盘中所有文件，执行 dir 接下来，我们可以看见D盘并没有NodeDemo这个文件夹

4.3 接下来我们新建一个文件夹，执行 md NodeDemo (注意md后面有一个空格）。然后执行 dir 查看文件夹是否创建成功。

5.使用 cd 命令进入项目 my-project 中，并安装项目依赖项

5.1 执行 cd 命令，将目录转到选定的目录。在NodeDemo目录下，再运行命令 vue init webpack firstApp 这个命令的意思是创建一个基于 webpack 模板的新项目firstApp.
运行初始化命令会让用户输入项目名称，项目描述，作者信息等，可以一直回车都行。

这个时候又会等待一段时间。就会显示项目创建成功。
我们去D盘看看NodeDemo是否已创建文件：

打开my-project

介绍一下目录及其作用：

build：最终发布的代码的存放位置。

config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。

node_modules：npm 加载的项目依赖模块,整个项目需要的依赖资源。（初次创建vue项目，node_modules这个依赖包资源是没有的，需要安装）

src：这里是我们开发的主要目录，基本上要做的事情都在这个目录里面，里面包含了几个目录及文件：

assets:放置一些图片，如logo等

components:目录里放的是一个组件文件，可以不用。

App.vue：项目入口文件，我们也可以将组件写这里，而不使用components目录。

main.js ：项目的核心文件

static：静态资源目录，如图片、字体等。

test：初始测试目录，可删除

.XXXX文件：配置文件。

index.html：首页入口文件，可以添加一些meta信息或者同统计代码啥的。

package.json：项目配置文件。

README.md：项目的说明文件。

5.2 安装项目所需要的依赖。先执行 cd my-project 进入文件夹

5.3 执行 cnpm install 安装完成，项目里会多一个node_modules文件夹，这里面就是我们需要的依赖包资源。

安装完依赖包资源后，我们就可以运行整个项目了。运行项目前一定要确保依赖包资源存在。

6.成功执行以上命令后访问

在项目目录中，运行命令 npm run dev 会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

项目启动后，在浏览器中输入项目启动后的地址：localhost:8080