Mac安裝vue.js開發環境

Mac安裝vue.js開發環境

DannyHooDanny的專欄訂閱

• 1、vue.js開發環境
• 2、初始化一個vue.js項目
• 3、vue.js項目打包部署

原本覺得在Mac上搭建vue.js的環境挺簡單的，誰知遇到各類問題（多是RP問題），網上解決的方法也寥寥無幾，這裏就記錄下遇到的坑。

1、vue.js開發環境

---

一、安裝 brew，這個簡單，直接執行遠程腳本

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

二、安裝 nodejs，這一步時間可能略長（執行時間長短也有可能跟網絡有關係）

brew install nodejs

三、獲取nodejs模塊安裝目錄訪問權限

sudo chmod -R 777 /usr/local/lib/node_modules/

四、安裝淘寶鏡像，國內直接使用 npm 的官方鏡像是很是慢的，因此這裏使用淘寶 NPM 鏡像

1）更改npm源：

npm config set registry https://registry.npm.taobao.org

（2）配置後可經過下面方式來驗證是否成功，若是顯示「https://registry.npm.taobao.org」則說明配置成功

npm config get registry

（3）而後安裝淘寶的cnpm（若是該步驟報錯「rollbackFailedOptional」，能夠嘗試執行步驟4或步驟5，不然跳過步驟4或步驟5）

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

（4）先刪除原有的全部代理，再從新安裝淘寶的cnpm

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

（5）報錯「rollbackFailedOptional」，還多是權限問題，用sudo執行：

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

如下是安裝淘寶cnpm成功的結果：

MacBook-Pro:~ hu$ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
npm WARN deprecated socks@1.1.10: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
/usr/local/bin/cnpm -> /usr/local/lib/node_modules/cnpm/bin/cnpm
+ cnpm@6.0.0
added 632 packages from 843 contributors in 22.264s

五、用淘寶的cnpm安裝vue

cnpm install vue
cnpm install --global vue-cli

到這裏vue.js環境就算ok了。

2、初始化一個vue.js項目

---

一、本身建立並進入一個項目目錄，建立一個名爲VueDemo的vue項目

cd /usr/local/projects/vue/
vue init webpack VueDemo

建立項目可能會報錯「vue-cli · Failed to download repo vuejs-templates/webpack: tunneling socket could not be established, cause=Parse Error」，能夠嘗試以下： （1）清空npm代理，從新執行

npm config set proxy null
vue init webpack VueDemo

（2）或者sudo執行（webpack是構建工具，也就是整個項目是基於webpack的）

sudo vue init webpack VueDemo

建立項目成功的結果：

? Project name VueDemo
? Project description A Vue.js project
? Author danny <danny@gmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "VueDemo".

# Project initialization finished!
# ========================

To get started:

  cd vue-demo-01
  npm install (or if using yarn: yarn)
  npm run lint -- --fix (or for yarn: yarn run lint --fix)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

二、啓動項目 （1）安裝項目依賴，啓動項目須要先安裝項目所需依賴，就跟java的maven項目須要先更新dependencies同樣，具體項目都依賴了什麼，在項目根目錄下package.json中的devDependencies標籤下能夠看到

cd /usr/local/projects/vue/VueDemo
sudo cnpm install

在Mac下，有些項目執行install時可能會報錯「libtool: unrecognized option `-static’」，解決方法：在~/.bash_profile中添加「PATH="/Library/Developer/CommandLineTools/usr/bin:$PATH」，再從新打開一個終端，從新運行install命令。

安裝成功以後，項目根目錄會多出一個node_modules文件夾，這裏邊就是項目須要的依賴包資源（文件挺多的）。

（2）運行項目，用熱加載的方式啓動項目，在修改完代碼後不用手動刷新瀏覽器就能實時看到修改後的效果。

cnpm run dev

啓動成功的結果：

> vue-demo-01@1.0.0 dev /usr/local/projects/vue/VueDemo
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 95% emitting

 DONE  Compiled successfully in 3084ms                                                                                                                                   下午10:58:20

 I  Your application is running here: http://localhost:8080

打開http://localhost:8080就是vue默認的模板

對於用慣了idea的同窗可能想在idea中開發vue，idea配置vue開發環境網上有不少教程，這裏就不重複了，隨便貼一篇：https://www.cnblogs.com/phpdragon/p/7216994.html。

3、vue.js項目打包部署

---

當vue.js項目開發完成須要部署時，先打包，再部署。 一、打包 在項目目錄下，執行

cnpm run build

執行完以後，項目根目錄會出現一個dist文件夾，裏面有一個index.html，直接打開就能夠看到頁面效果。

二、部署 上面步驟，dist就是打好的包，能夠直接把dist部署在nginx等服務器下，以nginx爲例，把nginx.conf中的location指向dist文件夾，就能夠了。

server {
        listen  80;
        server_name  127.0.0.1;
        location / {
            root /data/delploy/dist/;
            index  index.html index.htm;
        }
}

安裝brew

git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`

若是報錯就切換到指定的文件夾下進行操做

# 報錯信息
curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection

報錯版本不一致：

vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.   
You may want to run the following to upgrade to Vue CLI 3:    
  npm uninstall -g vue-cli   
  npm install -g @vue/cli
  
  
# 使用
sudo+npm uninstall -g vue-cli 
sudo + npm install -g @vue/cli
分別執行