Vue.js學習筆記—從安裝Node.js、cnpm鏡像、webpack打包工具、vue-cli腳手架到新建打開項目

Window 上安裝Node.js

官網下載：https://nodejs.org/en/

根據選擇下載

​

開始安裝node.js

點擊運行

 ​

​

​

​

​

安裝成功！

版本測試

Cmd命令

檢查是否配置環境！

輸入：path

​

查看node版本

輸入：node --version

​

查看npm版本

輸入npm -v

​

 

2、安裝cnpm鏡像、webpack打包工具、vue-cli腳手架

什麼是cnpm?

瞭解cnpm先了解npm

npm（node package manager）是nodejs的包管理器，用於node插件管理（包括安裝、卸載、管理依賴等）, NPM是隨同NodeJS一塊兒安裝的包管理工具，能解決NodeJS代碼部署上的不少問題，它是 Node 得到成功的重要緣由之一

由於npm安裝插件是從國外服務器下載，受網絡影響大，可能出現異常，因此感謝淘寶團隊幹了這事。來自官網：「這是一個完整 npmjs.org 鏡像，你能夠用此代替官方版本(只讀)，同步頻率目前爲 10分鐘 一次以保證儘可能與官方服務同步。簡而言之就是使用cnpm加快下載安裝速度！詳情瞭解淘寶鏡像：https://npm.taobao.org/

安裝cnpm鏡像

因爲npm有些資源被屏蔽或者是國外資源的緣由，常常會致使用npm安裝依賴包的時候失敗，全部我還須要npm的國內鏡像---cnpm

輸入： npm install -g cnpm --registry=http://registry.npm.taobao.org

​

 

安裝webpack打包工具

輸入：npm install webpack -g

​

 

安裝全局vue-cli腳手架

cnpm install vue-cli -g

​

過程會耗時十幾秒，等跑完就能夠了！

好了，到此說明整個環境就搭建好了,說明安裝完成。

2、新建Vue項目

建立Vue工做目錄

搭建完手腳架以後，咱們開始建一個新項目，通常狀況下！咱們不建議把項目目錄放在C盤，由於vue的文件比較大。

習慣會在其餘盤，常見一個工做空間目錄，易於管理！

如：我在E盤建立一個文件夾叫：Vue-WorkSpace     而後在當前目錄下打開命令窗口！

兩種方法進入命令臺

手動鍵入方法：

鍵盤按Win+R； 輸入cmd   跳出命令窗口：

​

而後改盤到工做目錄，

輸入：E:

再輸入：cd E:/Vue-WorkSpace

​

Shift鼠標右鍵快捷方法：

進入Vue-WorkSpace目錄！按住鍵盤Shift鍵(記住是按住)，點擊鼠標右鍵!

點擊：在此處打開Powershell窗口

​

就會跳出命令窗口（這裏是Win10的Windows PowerShell）

​

開始建立Vue項目

輸入命令：vue init webpack my-first-project   

// my-first-project至關於項目文件夾能夠自定義，是基於webpack的項目。

輸入後回車！能夠看下內存！前五個直接能夠Yes，三個NO（這三個暫時NO，否則會提示不少警告），看圖！

​

完成以後，在工做目錄就有新建了一個文件夾

​

3、打開Vue項目

無論是接到新的Vue項目Demo，仍是打開一個Vue項目，如下操做都是通用的！

進入項目文件夾

當Vue環境安裝完後！需命令進入Vue項目文件夾（即my-first-project文件夾內）！

輸入： cd my-first-project

回車進入新建的項目。

​

在項目裏安裝依賴

由於各個模板之間都是相互依賴的，因此如今咱們要安裝依賴，在項目目錄下里輸入如下命令。

輸入：cnpm install

​

運行項目

一切環境依賴安裝準備就緒，咱們就能夠打開測試一下本身新建的vue項目的運行狀況，

輸入：cnpm run dev  

直接回車。就能夠在瀏覽器訪問地址，默認爲localhost:8080。

​

在瀏覽器輸入localhost:8080，運行項目

直接在瀏覽器輸入localhost:8080就能夠打開默認的模板；如圖：

​

到此爲止，vue開發環境搭建完畢。