nodejs+vue+webpack之項目概要

坦白說，我的語文是數學老師教的，總結去年用到的一些前端新技術，趁着春節假期，將所學的一些知識寫成文章並附帶寫成一個簡單的項目，希望對大家有所幫助，如有寫的不好的地方，歡迎拍磚。

本項目采用node.js做服務端提供數據接口，webpack作為前端模塊化開發的管理工具，vue.js作為MVVM組件化開發的工具。細節方面還涉及到數據存儲，安全認證，saas，es6等。項目結構如下：

客戶端項目結構如下：

• /dist
  • build.index.js
  • build.user.js
  • index.css
  • user.css
• node_modules
• /src
  • components/
    • index.vue
    • login.vue
    • userlist.vue
  • img/
  • model
    • userModel.js
  • scss
    • layout.scss
    • reset.scss
    • user.scss
  • util
    • cacheManger.js
    • httpHelper.js
    • md5.js　　
• webpack.config.js
• package.json
• index.html
• users.html

服務端項目結構如下：

• /node_modules
• app.js
• databaseManger.js
• fileManger.js
• HttpResult.js
• package.json
• userinfo.json

下載地址：https://github.com/xuqin-kelly/node-vue-webpack

安裝方法(node環境下運行以下命令)：

服務端：

打開node環境，切換到server目錄下:

1、安裝package.json文件下的模塊：npm install

2、打開服務器：node app.js

 客戶端：

新開一個node環境，切換到client目錄下:

1、安裝package.json文件下的模塊：npm install

2、安裝完模塊后，輸入webpack命令，打包生成dist目錄及相關文件

3、輸入npm run dev命令，客戶端會自動運行：http://localhost:8080/

效果如下：

登錄頁面：

報名頁面：

 

報名列表：

 下一篇：nodejs+webpack+vue之webpack