【前端小小白的学习之路】vue学习记要①（vue-cli脚手架构建项目结构）

我们直接从vue的工程化开始入手。

在这里用git命令行搭建项目环境。（当然直接cmd命令行下也是一样的）

git下载安装地址：https://www.git-scm.com/download/win

git使用教程:http://www.cnblogs.com/havenshen/p/3493522.html

git常用命令整理：http://www.cnblogs.com/luxiaoxing/p/7545403.html

1.node安装。

node下载安装地址：http://nodejs.cn/download/

注 ：安装 vue-cli 脚手架目前需要node版本为 v4.0 以上；

安装过程就是一直点击Next就好，安装完成后可以在命令行输入node -v查看版本信息。

2.安装淘宝镜像。在命令行下输入：

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

安装完成后可以在命令行输入cnpm -v查看版本信息。

因为npm的服务器在国外，有时候安装依赖的时候会很慢，所以用cnpm来安装依赖会相当快,其用法跟npm一样。（推荐使用cnpm）

3.安装webpack，在命令行下输入：

cnpm install webpack -g

安装完成后可以在命令行输入webpack -v查看版本信息。

webpack详细使用教程请移步：[js高手之路]深入浅出webpack教程系列

4.安装vue-cli。在命令行下输入：

cnpm install -g vue-cli　　

安装完成后可以在命令行输入vue -V查看版本信息。

这个vue-cli呢，是vue的脚手架工具，可以自动生成目录，跟express生成器差不多。

现在我们就可以用vue-cli脚手架生成一个工程项目了，项目名称是test。

1.选择或新建一个文件夹作为你的工程项目目录。

2.在这个指定的文件夹上面右击选中Git Bash就可以打开命令行了（没有安装git的可以cd 切换到你指定的目录下），在命令行下输入：

vue init webpack test

这时候会有一些提示你的信息，你只需一直回车即可。如下图test这个项目的基本结构就自动生成了。

此时我们就可以在指定的文件夹下看到test这个新生成的项目文件夹以及里面的项目结构了。

3.同时我们在test这个文件夹下打开命令行，安装项目所需的依赖(因为用脚手架的时候会自动构建package.json文件，所以这里直接安装依赖就好)。命令行下输入：

cnpm install

安装完成后test文件夹里面会多一个node_modules的文件夹也就是所需的依赖文件了。

4.运行项目。在test文件夹下打开命令行并输入：

npm run dev

服务启动成功后浏览器会默认打开一个“欢迎页面”，如下图：

最后，这个test的项目就用vue-cli脚手架工具构建好了。