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  啓動項目，瀏覽器自動打開初始頁面

 

本文對一些文章有借鑑，若是不滿，會道歉並刪除的。