从0构建vue项目

今天就来讲讲如何从0开始搭建vue的脚手架项目，其实很简单。

一：全部步骤

1>node -v(全局查询：node是必须的，需要先安装好node)
2>npm install -g vue-cli  (搭建vue-cli脚手架)
3>vue init webpack my-project  (出现项目基本目录)
4> npm install(cnpm install或者 yarn install)  (记住在my-project项目目录下执行，会生成node_modules文件夹)
5>npm run dev  (运行项目)

可用淘宝镜像cnpm.
npm install -g cnpm --registry=https://registry.npm.taobao.org

...............到此处已经可以成功运行vue..............................

6> npm install vue-router -D（vue-router路由的构建）

7>npm install vue-resource -D (vue-resource请求数据)
 

二.分步讲解

1>node -v

需要node环境支持，用于检测是否有node环境。

2>npm install -g vue-cli

全局安装vue-cli脚手架。

3>vue init webpack my-project  (出现项目基本目录)

运行到此处是会出现项目的基本目录。如下图

4> npm install

安装npm，npm为项目依赖的基础包，所有必须安装。安装npm需要一定的时间，看你的网速。

曾经安装了足足半个小时，这里解释下，安装npm是需要从国外网站下载的。所以需要一定的

时间。这里可以推荐下用cnpm。（就是淘宝镜像文件，相对来说比较快，与npm使用方法相同）

怎么安装npm你可以参考官网：https://npm.taobao.org/badge/v/cnpmjs.org.svg

安装cnpm方法：npm install -g cnpm --registry=https://registry.npm.taobao.org

下图给出安装成功项目文件夹的图示：

5>npm run dev

运行项目，运行成功会有网址出现或者自动打开浏览器进入（http://localhost:8080/）。

下面给出运行时图示和运行成功的图示：

此处已经成功运行了。

安装过程中避免不了出现问题，多查查。希望你们顺利安装。

6> npm install vue-router -D（vue-router路由的构建）

路由成功示意图：

7>npm install vue-resource -D (vue-resource请求数据)

三.下面给出vue项目的目录详解

重点说明一下，src目录。src目录就是我们后面需要操作的目录，其他目录只要顺利安装完成，就会出现。

希望你们喜欢。祝你们顺利完成安装vue-cli脚手架。

如果对你有帮助，希望点个赞或者关注一波，谢谢。