vue全家桶 ---建立一個新的vue專案

本文涉及到webpack、node.js、vue、vue-router、vuex、axios、less、element-ui、es6、git等相關知識。

1、前提基礎

• vue.js有著名的全家桶系列，包含了vue-router、vuex、axios，再加上構建工具vue-cli，就是一個完整的vue專案的核心構成。
• 學習本文之前需要掌握基本的js、css、html基礎知識
• node.js、git、webpack基礎知識
• 對vue.js、vuex等有基本的瞭解
• vue官網：cn.vuejs.org/v2/guide/
• vue-router官網：router.vuejs.org/zh/

2、開發環境

1. 安裝node.js,直接去官網下載安裝包即可：nodejs.org/en/，安裝完成以後可以開啟cmd/git,通過node -v/npm -v 檢視版本。

   

2. 安裝webpack, 通過npm install -g webpack全域性安裝。
3. 安裝git(用於程式碼管理)，直接百度下載安裝包即可

3、開始開發

1. 這裡我們採用vue-cli搭建一個新的專案，所以需要先安裝腳手架 npm install --g vue-cli。
2. 初始化一個專案：vue init webpack vue_demo_project，因為要用到vue-router,所有這裡選擇安裝vue-router，建議安裝ESlint，有助於養成良好的程式設計習慣。

   

3. 安裝依賴：cd vue_demo_project, npm install (如果安裝速度較慢，可以使用cnpm安裝，npm install -g cnpm --registry=https://registry.npm.taobao.org)。
4. 在編輯器中開啟專案，在根目錄下執行npm run dev。預設是8080 埠，可以在config裡的index.js修改。

   

   ps：建議將build 裡的assetsPublicPath的路徑字首修改為 ' ./ '，因為打包之後，外部引入 js 和 css 檔案時，如果路徑以 ' / ' 開頭，在本地是無法找到對應檔案的（伺服器上沒問題）。所以如果需要在本地開啟打包後的檔案，就得修改檔案路徑。

4、到這裡我們已經成功的建立一個新的vue專案。