node和vue-cli構建專案時安裝的常用依賴

清兒發表於2019-02-16
Vue

nvm安裝node的步驟

安裝 nvm：

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash

Mac系統的設定方法：（解決suorce 之後再次開啟終端不生效的問題）
如果你的電腦終端是zshrc 

cd ~ ( 進入當前使用者的home目錄)
open .zshrc

輸入一下內容

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

儲存後在終端繼續輸入

source ~/.zshrc

如果你的電腦終端是bashrc 

cd ~ ( 進入當前使用者的home目錄)

open .bash_profile //(開啟.bash_profile檔案，如果檔案不存在就 建立檔案：touch .bash_profile 編輯檔案：open -e .bash_profile)

直接更改彈出的.bash_profile檔案內容,把以下內容貼上進去：

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

再開啟~/.bashrc檔案，在末尾輸入

source ~/.bash_profile

儲存後在終端繼續輸入

source ~/.bashrc

注：這樣操作的原因是Mac終端是zshrc時，source一次之後每次開啟終端會預設會執行～／.zshrc檔案
當終端是bashrc時，.bashrc這個檔案一般不修改，可以新建.bash_profile檔案，設定環境變數，再在.bashrc檔案內source ~/.bash_profile，開啟終端會預設執行～／.bashrc檔案

最後輸入nvm可以看到如下資訊：Node Version Manager,說明nvm安裝成功

安裝 node.js

nvm install stable // 安裝最新穩定版 node
    
nvm alias default v4.1.0 // 設定預設版本

node -v (or nvm current) // 檢視當前版本

nvm use v5.5.0 // 切換版本

echo $PATH //  檢視實際安裝路徑

安裝cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

vue-cli構建專案以及其他需要安裝的常用依賴

npm install -g vue-cli
mkdir my-project && cd my-project
npm init
vue init webpack my-project
cd my-project
npm install
npm run dev

npm install webpack --save-dev
npm install vuex --save-dev
npm install style-loader css-loader stylus-loader stylus --save-dev
npm install --save-dev postcss-loader autoprefixer
npm install less less-loader --save-dev
npm install node-sass sass-loader --save-dev
npm install vue-resource --save-dev
npm install axios --save-dev
npm install --save-dev babel-loader babel-core babel-preset-env webpack 
npm install html-webpack-plugin --save-dev ( 安裝html-webpack-plugin外掛 )
npm install express --save-dev
npm install element-ui --save-dev

相關文章