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

一、安裝node.js 環境

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

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

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

nvm經常使用命令webpack

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包

查看可安裝版本列表git

nvm list available

clipboard.png

列出本地已安裝版本列表:github

nvm list

clipboard.png

安裝node,好比安裝 12.3.1 版本的nodeweb

nvm install 12.3.1

使用指定node 版本,好比:vue-cli

nvm use 10.13.0

三、安裝npm的鏡像源管理器(NRM)

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

全局安裝NRM 命令:windows

npm install -g nrm

查看源鏡像的命令:瀏覽器

nrm ls

clipboard.png

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

使用源,好比使用國內淘寶的源:

nrm use taobao

clipboard.png

測試 npm源的速度命令:

nrm test npm

clipboard.png

測試全部源的速度命令:

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

clipboard.png

填寫相應參數
clipboard.png

建立完成後,敲入命令

cd demo5

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

npm install

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

npm run dev

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

clipboard.png

相關文章
相關標籤/搜索