簡單搭建基於Webpack +Vue.js的開發環境

一、安裝node.js 環境

node.js下載地址：https://nodejs.org/dist/v12.4...

二、安裝node 版本管理器【NVM】

下載nvm
到github上下載最新版本 https://github.com/coreybutle... 的安裝包 nvm-setup.zip ，而後按提示安裝便可。

nvm經常使用命令

nvm install ## 安裝指定版本，可模糊安裝，如：安裝v6.2.0，既可nvm install v6.2.0，又可nvm install 6.2

nvm uninstall ## 刪除已安裝的指定版本，語法與install相似

nvm use ## 切換使用指定的版本node

nvm ls ## 列出全部安裝的版本

nvm ls-remote ## 列出因此遠程服務器的版本（官方node version list）

nvm current ## 顯示當前的版本

nvm alias ## 給不一樣的版本號添加別名

nvm unalias ## 刪除已定義的別名

nvm reinstall-packages ## 在當前版本node環境下，從新全局安裝指定版本號的npm包

查看可安裝版本列表

nvm list available

列出本地已安裝版本列表：

nvm list

安裝node，好比安裝 12.3.1 版本的node

nvm install 12.3.1

使用指定node 版本，好比：

nvm use 10.13.0

三、安裝npm的鏡像源管理器（NRM）

npm 的下載包地址： https://registry.npmjs.org/ ，國外的。nrm(npm registry manager )是npm的鏡像源管理工具（地址：https://github.com/Pana/nrm），有時候國外資源太慢，那麼咱們能夠用這個來切換鏡像源。

全局安裝NRM 命令：

npm install -g nrm

查看源鏡像的命令：

nrm ls

以上都是鏡像地址。鏡像地址前面的 表示當前使用該地址下包。若修改 的位置 ，輸入： nrm use cnpm (表示使用該鏡像) 。

使用源，好比使用國內淘寶的源：

nrm use taobao

測試 npm源的速度命令：

nrm test npm

測試全部源的速度命令：

nrm test

NRM的做用：
只是單純的提供了幾個經常使用的下載包的地址，並可以讓咱們在這幾個地址間
進行切換，但咱們每次裝包的時候 使用的裝包工具 ，都是 npm 。

四、vue.js 命令行工具 CLI

安裝 @vue/cli ：（全局）

npm install -g @vue/cli

若想要使用舊的 vue-li 還要安裝 @vue/cli-init ：

npm install -g @vue/cli-init

vue-cli 文檔：https://github.com/vuejs/vue-...

五、安裝 Vue Devtools 調試器

在瀏覽器上安裝 Vue Devtools。它容許你在使用 Vue 時，可以有一個更友好的界面來審查和調試 Vue 應用。

至此，webpack+vue.js 開發環境搭建完畢。

六、建立一個vue 項目demo

打開cmd 命令窗口，進入一個文件夾，敲入如下命令，生成一個vue項目：

vue init webpack demo5

填寫相應參數

建立完成後，敲入命令

cd demo5

進入項目文件夾後，敲入命令

npm install

安裝相關依賴的包，而後敲入命令執行項目。

npm run dev

在瀏覽器打開http://localhost:8081