目錄
一、node.js環境安裝
二、vue-cli2安裝
三、vue-cli3安裝
一、node.js環境安裝
根據電腦選擇64位或者32位在Nodejs官網安裝下載對應文件到本機。
下載成功可在命令行查看 nodejs 版本號，若無法查看配置一下環境變量即可
還可查看npm版本號
補充：常見的dos命令
cd打開文件夾
md 創建新文件夾
dir查看文件夾內容
cd..返回上一級文件夾
ctrl + c 命令行終止
cls清屏
npm與cnpm的區別
npm（node package manager）是nodejs的包管理器，用於node插件管理（包括安裝、卸載、管理依賴等）
cnpm：因為npm安裝插件是從國外服務器下載，受網絡影響較大，可能出現異常，所以淘寶團隊分享了使用國內鏡像來代替國外服務器。
-g參數 全局安裝（global）
可以通過 npm root -g 查看全局安裝的文件夾位置
-S參數（--save）
安裝包信息將加入到dependencies(生產階段的依賴)
-D參數（ --save-dev ）
安裝包信息將加入到devDependencies(開發階段的依賴)所以開發階段一般使用它
i 是install的縮寫（注意：前面沒有“-”）
二、vue-cli2安裝
手動從淘寶鏡像獲取資源
npm install -gd express –registry=http://registry.npm.taobao.org
為了避免每次安裝都需要手動獲取registry參數，可以使用如下命令進行永久設置
npm config set registry http://registry.npm.taobao.org
下載cnpm
npm install -gd cnpm –registry=http://registry.npm.taobao.org
通過 cnpm -v 指令查看下載是否成功
npm install -gD vue-cli
cnpm install -gD vue-cli (速度較快)
通過vue -v指令查看是否安裝成功
1、創建vue-cli2項目
vue init webpack projectName
注意：1、vue-router 官方路由，需要安裝
2、ESLint是個代碼風格管理工具，用來統一代碼風格，一般項目都會使用
2、成功啟動vue-cli2項目
在瀏覽器地址欄上輸入 http://localhost:8080
3、啟動服務：
npm run dev（vue-cli2啟動）
npm run serve（vue-cli3啟動）
注意：若項目初始化失敗則通過 npm install -gD vue-cli 重新安裝腳手架即可
4、卸載vue-cli2
npm uninstall vue-cli -g
三、vue-cli3安裝
注意：若不用vuecli的模板，可採用純手工搭建
1、 安裝依賴：npm install 或者 cnpm install
2、初始化：npm init -f 或者 cnpm init -f
3、安裝組件，並查看安裝後的內容
通過指令 cnpm i -D vue-router 安裝路由vue-router
通過指令 type package.json 查看是否安裝成功
通過指令 cnpm i -D eslint 安裝eslint
通過指令 type package.json 查看是否安裝成功
安裝vue-cli3/升級-2
npm i -g @vue/cli
vue圖形界面先睹為快
通過指令 vue ui 啟動圖形界面
可以在圖形界面創建項目，所見即所得，缺點是創建時間比較長，推薦使用npm創建項目
運行項目
以命令行的方式創建項目
1、創建vue-cli3項目，進入預設界面，選擇第二個選項手動設置
vue create test3
進入第二個界面，用空格和上下鍵進行選擇Babel 和 Router,然後選擇默認
選擇package.json ，而後選擇默即可創建成功
2、進入項目並運行
cd test3
npm run serve
閱讀更多 想做大牛的程序猿 的文章
