工程位置：e:\vue\myproject
安裝步驟：
node.js--->淘寶鏡像---->webpack--->vue-cli腳手架----->用腳手架構建項目
一钳恕、那么我們就從最簡單的環(huán)境搭建開始：
E:\工作文件\vue\node-v10.15.1-x64.msi
- 安裝node.js蠢沿，從node.js官網(wǎng)下載并安裝node(我下載的是node-v10.15.1-x64.msi)隆箩，安裝過程很簡單漠其，一路“下一步”就可以了。安裝完成之后跟狱，打開命令行工具(win+r敞曹，然后輸入cmd)丧靡，輸入 node -v，如下圖歉秫，如果出現(xiàn)相應的版本號蛾洛，則說明安裝成功。
這里需要說明下雁芙，因為在官網(wǎng)下載安裝node.js后轧膘，就已經(jīng)自帶npm（包管理工具）了，另需要注意的是npm的版本最好是3.x.x以上兔甘，以免對后續(xù)產(chǎn)生影響扶供。
- 安裝淘寶鏡像，打開命令行工具裂明，把這個
你可以使用我們定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認的npm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
復制后右鍵粘貼到命令行椿浓，安裝這里是因為我們用的npm的服務器是外國太援，有的時候我們安裝“依賴”的時候很很慢很慢超級慢，所以就用這個cnpm來安裝我們所需要的“依賴”扳碍。
安裝完成之后輸入
cnpm -v
如下圖提岔，如果出現(xiàn)相應的版本號，則說明安裝成功笋敞。
以后就可以使用cnpm 命令下載依賴了
- 安裝webpack碱蒙，打開命令行工具輸入：
Webpack 是一個前端資源加載/打包工具。它將根據(jù)模塊的依賴關系進行靜態(tài)分析夯巷，然后將這些模塊按照指定的規(guī)則生成對應的靜態(tài)資源赛惩。
cnpm install webpack -g
安裝完成之后輸入
webpack -v
我這個版本輸入上述命令后，會詢問是否先安裝webpack-cli,輸入y趁餐，后等待安裝成功喷兼。安裝過程如圖
再次輸入webpack -v 即可顯示版本號了
- 安裝vue-cli腳手架構建工具，打開命令行工具輸入：
cnpm install vue-cli -g
安裝完成之后輸入 vue -V（注意這里是大寫的“V”）后雷，如下圖季惯，如果出現(xiàn)相應的版本號，則說明安裝成功臀突。
二勉抓、通過以上四步，我們需要準備的環(huán)境和工具都準備好了候学，接下來就開始使用vue-cli來構建項目
- 在硬盤上找一個文件夾放工程用的藕筋。這里有兩種方式指定到相關目錄：①cd 目錄路徑 ②如果以安裝git的，在相關目錄右鍵選擇Git Bash Here
我的安裝目錄為d:/vue,命令行狀態(tài)進入上述目錄
注意：win10需要做如下操作梳码，然后再運行步驟2
在開始-搜索框搜索power shell 念逞，再右鍵以管理員身份運行
之后 輸入以下命令：
set-ExecutionPolicy RemoteSigned
接下來的確認頁面輸入y即可。
-
安裝vue腳手架輸入：格式：vue init webpack 項目名稱
vue init webpack myproject
注意這里的“myproject ” 是項目的名稱可以說是隨便的起名边翁，但是需要主要的是“不能用中文”翎承。過程中eslint輸入n，其他y
接下來的過程如圖：我猜想每臺機器執(zhí)行結(jié)果可能不同符匾，因為我此次安裝時就提示下載了chrome驅(qū)動
- cd 命令進入創(chuàng)建的工程目錄叨咖，首先cd myproject（這里是自己建工程的名字）；
創(chuàng)建完成的“myproject”目錄如下：
下面我簡單的說明下各個目錄都是干嘛的：
- 啟動項目啊胶，輸入：npm run dev甸各。服務啟動成功后瀏覽器會默認打開一個“歡迎頁面”，如下圖：
注意：這里是默認服務啟動的是本地的8080端口焰坪，所以請確保你的8080端口不被別的程序所占用趣倾。
至此簡單的一個項目構建完畢....后面我將繼續(xù)利用這個構建的項目寫一個簡單的單頁面應用。
看到這里給大家推薦一個ide用Atom然后安裝vue插件即可某饰，非常之好用
作者：datura_lj
鏈接：http://www.reibang.com/p/1626b8643676
來源：簡書
簡書著作權歸作者所有儒恋，任何形式的轉(zhuǎn)載都請聯(lián)系作者獲得授權并注明出處善绎。
