Vue入坑——vue-cli（脚手架）搭建

一块儿学vue——vue学习总路线

——————————^~^我是萌萌哒分割线^~^————————————————

语法学了，如今就该实操了。

安装个脚手架试试。

1、安装环境

（1）、安装node

先从node.js官方下载，安装过程很简单，这里就不赘述了（傻瓜式安装）

    安装完成后，用命令行输入：node -v，显示版本号，就说明安装成功

安装好node之后就自带npm安装包管理工具了，npm的服务器是国外的，所以会很慢，也许对后面的操做产生影响，所以在这里安装淘宝镜像：

输入：

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

安装完以后，输入：cnpm -v，显示版本号则安装成功

（2）、安装webpack

输入：

npm install webpack -g

这里的-g是全局安装的意思，若是不想全局安装能够不要

安装好后，仍是查看一下版本号以确认是否安装成功：webpack -v

（3）、安装vue-cli脚手架：

输入：

npm install vue-cli -g

安装完后输入：vue -V（V是大写哦！）

2、构建项目

经过以上步骤，环境咱们都搭建好了，如今开始构建咱们的项目

一、在你想要建项目的目录下，打开命令行，若是安装了git，可使用git bash here

二、输入：vue init webpack vueclipractice

这里的vueclipractice是项目名称，本身随便起，可是不能用中文哈

好啦，项目建立好了，看看刚刚新建的那个项目是否是存在了

三、进入项目，安装依赖

npm install 

四、安装vue路由模块和网络请求模块

cnpm install vue-router vue-resource --save

好了，如今就弄完了，看看目录长什么样

五、我用编译器打开，解释一下各个目录各个文件都是干吗使得。

六、启动项目

输入：

npm run dev

成功后显示下图

在浏览器输入localhost:8080

注意：8080端口不要被占用

好啦，到此为止vue-cli就搭建好了。下一步就能够来认识一下vue-cli的项目结构

——————————^~^我是萌萌哒分割线^~^————————————————

                                                                                        下一篇：认识vue-cli的项目目录结构