基於Vue + element-ui快速搭建前臺頁面(PC端)

1.Node.js基礎知識

Node.js 是一個基於 Chrome V8 引擎的 JavaScript 運行環境。 Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型。 

Node 是一個讓 JavaScript 運行在服務端的開發平臺，它讓 JavaScript 成爲與PHP、Python、Perl、Ruby 等服務端語言平起平坐的腳本語言。 

Node對一些特殊用例進行優化，提供替代的API，使得V8在非瀏覽器環境下運行得更好。V8引擎執行Javascript的速度非常快，性能非常好。Node是一個基於Chrome JavaScript運行時建立的平臺， 用於方便地搭建響應速度快、易於擴展的網絡應用。Node 使用事件驅動， 非阻塞I/O 模型而得以輕量和高效，非常適合在分佈式設備上運行數據密集型的實時應用。

2.工具安裝

2.1nodejs 安裝

2.1.1  window安裝Nodejs    參考：Node.js 安裝及環境配置之 Windows 篇

2.1.2 Mac安裝 Nodejs

•   安裝安裝brew參考：https://www.jianshu.com/p/8a2572fe60be
•   用brew安裝node brew install node
•   參考：MAC 安裝BREW跟NODE

2.2VScode下載 

2.2.1 下載：https://code.visualstudio.com/

2.2.2 安裝插件

• Auto Close Tag 
• Auto Rename Tag
• Beautify
• Prettier
• Vetur (vue必備)
• VueHelper
• Vue 2 Snippets

參考：https://www.cnblogs.com/clwydjgs/p/10078065.html

3.項目創建

3.1.全局安裝vue-cli腳手架

npm install -g vue-cli

3.2.創建項目

mkdir my-project && cd my-project

vue init webpack

3.3.安裝element-ui

npm i element-ui

3.4.安裝element-ui安裝node-sass

npm install --save-dev sass-loader node-sass

3.5.安裝axis (後端請求）

npm install axios

3.6.組件安裝

npm install

3.7.啓動項目

npm run dev

3.8.查看頁面

 

4.代碼結構說明

4.1.package.json

package.json文件說明解釋

4.2.node_modules

npm install 執行完畢後，我們可以在 nodemodules 中看到所有依賴的包

4.3.src目錄結構

assets: 放置靜態資源，包括公共的 css 、 js 、字體文件、img 圖片文件 等。
components: 放置公共模塊組件/複用組件，如對話框，用戶信息組件；
pages: 放置頁面組件。通常是這裏，引入通用模塊組件，加入邏輯，形成完整的頁面；
router: 放置路由設置文件，指定路由對應的頁面；
store: 放置 vuex 需要的 state、mutations 等；
App.vue: 入口組件，pages 裏的組件會被插入此組件中，此組件再插入 index.html 文件裏，形成單頁面應用；
main.js: 入口 js 文件，影響全局，作用是引入全局使用的庫、公共的樣式和方法、設置路由等。

 

5.創建2個頁面（我的任務和團隊任務）

 

 

6.Demo地址

https://github.com/alvn1213/vue-demo

 

end~