Vue搭建项目的过程

Vue搭建项目的过程

目录包括如下：
a. 安装node.js
b. 安装cnpm
c. 安装vue-cli脚手架构建工具
d. 用vue-cli构建项目
e. 安装项目所需的依赖
f. 运行项目

一、安装node.js

从node.js官网下载并安装node，安装过程很简单，点击“下一步“即可

安装完成之后，打开命令行工具，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。

npm包管理器，是集成在node中的，所以，直接输入 npm -v就会如下图所示，显示出npm的版本信息。

OK！node环境已经安装完成，npm包管理器也有了。
由于有些npm有些资源被屏蔽或者是国外资源的原因，
经常会导致用npm安装依赖包的时候失败，
所有我还需要npm的国内镜像—cnpm

二、 cnpm 安装

在命令行中执行：
npm install -g cnpm --registry=http://registry.npm.taobao.org
如下图所示，即安装成功

三、安装vue-cli脚手架

在命令行中执行：
cnpm install -g vue-cli
（注意，这里使用cnpm来替代npm，npm相比较有点慢）
以上环境和工具都好了，开始来动手构建项目吧！！！

四、构建项目

选定文件目录，cd切换到相对应的文件下（这个是在桌面下）

命令行中执行：
vue init webpack firstVue
（初始化一个项目，webpack是构建工具，firstVue指的是文件的名称）

接下来输入需要执行的命令：
cd firstVue
npm install
npm run dev

一步一步运行完之后，需要填写项目的名称、作者、描述等等，这些回车默认即可；

五、安装项目的依赖：

打开firstVue的文件夹，目录如下：

打开文件package.json文件，暂时只是搭建了一个结构框架，项目中的依赖资源还没有下载

命令行执行，安装项目所需要的依赖
cnpm install 或者npm install

安装完成之后，在项目firstVue文件夹中多出一个node_modules文件夹，即为我们的依赖包

六、运行项目

命令行中执行：
npm run dev

简单介绍下 npm run dev 命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方式

运行成功之后会自动打开 localhost:8080（如果浏览器没有自动打开，可以手动输入;打开之后，如下图所示

看到上面的页面，及项目搭建并运行成功了呢！！！。。。。。