Vue-cli 搭建项目

Vue框架学习--使用 vue-cli 搭建项目
vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 能够快速建立 vue 项目，GitHub地址是：https://github.com/vuejs/vue-cli

1、安装node.js
首先须要安装node环境(必须)，能够直接到中文官网(http://nodejs.cn/download/)下载安装包。
安装完成后，能够命令行工具中输入 node -v 和 npm -v，若是能显示出版本号，就说明安装成功。

2、安装webpack （最新的 vue 项目模板中，都带有 webpack 插件，能够不用安装）
  Webpack是一款用户打包前端模块的工具，它将根据模块的依赖关系进行静态分析，而后将这些模块按照指定的规则生成对应的静态资源。

Webpack能够直接node环境中使用  npm install -g webpack  进行安装

3、安装vue-cli
vue-cli 是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，分为vue init webpack-simple 项目名 和vue init webpack 项目名 两种。

安装好了以上环境，咱们直接全局安装vue-cli

npm install -g vue-cli

('-g'表明全局安装；'-S'表明开发依赖)
可是这种安装方式比较慢，推荐使用国内镜像来安装，因此咱们先设置 cnpm：

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

若是安装失败，可使用 npm cache clean 清理缓存，而后再从新安装。后面的安装过程当中，若有安装失败的状况，也须要先清理缓存

一样可使用 cnpm -v 查看是否安装成功

4、生成项目模板
在项目文件位置的命令行中，输入生成命令：

vue init webpack Vue-Project

　　init 是vue模板初始化
　　webpack 是模板名称
　　Vue-Project 是自定义的项目名



剩下的就是项目的启动了，如图中：
第一步： cd  Vue-Project   进入项目文件目录
第二步：npm install  安装所需依赖
第三步：npm run dev  启动项目，浏览器自动打开初始页面

 

本文对一些文章有借鉴，若是不满，会道歉并删除的。