使用Vue-cli快速搭建webpack項目

使用NPM快速搭建Vue Webpack項目

• 第一步 下載更新npm

Windows下使用以下命令全局安裝：

npm i -g n //或者 npm install -g n

安裝好以後使用命令:

node -v //以及
npm -v

*若是能查到版本號說明安裝成功

• 第二步 安裝vue-cli (腳手架)

使用以下命令全局安裝：

npm i -g vue-cli

安裝好以後輸入：

vue -v

*若是能查到版本號說明安裝成功

• 第三步 進入項目存放目錄並生成項目

使用以下命令：

vue init webpack projectName  //projectName是你項目名稱

此時模板項目就會下載，以後會出現幾個讓你確認的選項，輸入y（yes）回車便可，以下圖所示：

如圖中標註同樣，安裝完成後會自動提示是否使用npm install命令，回車就會自動安裝項目依賴，固然你也能夠隨後在項目根目錄下手動安裝項目依賴

• 第四步 啓動項目

輸入命令：

npm run dev

補充一個小貼士（針對於windows）：若是往後不輸入命令啓動項目，就在項目根目錄下新建一個.bat文件：先新建一個txt而後編輯npm run dev保存，將文件後綴修改成.bat。以下圖：之後雙擊就能夠啓動項目了

• 第五步 發佈項目

先使用命令：

npm run build

會在項目根目錄下生產一個dist文件夾，而後將文件夾拷到服務器上就能夠了
最後補充一張流程圖，來完善一下剛剛的步驟：

• 第六步 安裝開發依賴

npm i axios --save  // 等等