vue-cli3 搭建 vue 項目

項目是在mac的環境下配置的 win的同學請移步【https://www.cnblogs.com/zhaomeizi/p/8483597.html】

• 安裝 node.js
       1. 首先是打開node官網【https://nodejs.org/en/#download】 下載LTS版本，一路傻瓜式安裝。
       2. 打開Mac下的終端輸入：node -v 會出現版本號就說明成功了。

• 安裝 npm
       1. 首先獲取 node 的安裝模塊的權限

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

     2. 然后安裝 npm 淘寶鏡像

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

     3. 檢測是否安裝 npm 成功

npm -v

• 安裝 webpack (全局安裝)

npm install webpack -g

     如果安裝卡住了，或者安裝不上，可以嘗試

cnpm install webpack -g

• 安裝 vue 手腳架（全局安裝，比如 vue 模板等）

npm install vue-cli -g

• 創建 vue 項目
       1. 創建文件目錄並 cd 到對應的文件夾下

vue create projectName(項目名稱)

     2. 可以選擇自動的配置，也可以選擇手動的配置，這里我選擇的是自動配置，出現如下圖表示項目創建成功啦。

     3. 項目創建好之后可以運行查看項目，出現正常的界面后說明項目創建成功了。

     4. 項目編寫完成我們需要將其打包，直接  npm run build  就可以了，對應目錄下增加了  dist  文件夾和內容。

     5. 這里我們會遇到一個問題，直接打開 index.html 是一個空白的頁面，這我們需要增加一些配置。

     打開項目增加vue.config.js文件  cli3搭建項目不會創建這個文件，需要手動創建

增加代碼：

module.exports = {
    publicPath: './'
}

     6. 重新進行build就有頁面展示了，這樣我們就完成了vue項目的創建和打包。