HIS項目框架搭建流程

ES6
nodejs
webpack
git
vue基礎
vue form\v-for\v-if,v-if-else.v-else\v-on\v-bind\v-model的重點練習
vue component
vue resource
vue router
vue-cli
ElementUI
ESlint
stylui

 

/*********** github發佈步驟： **************/

1. 完成註冊和登陸
2. 點擊頭像——your profile -- Repositories -- new -- Repository name（存儲庫、項目名）-- 勾上Initialize README
3. 點擊Upload files，把須要上傳的文件拖動到上傳區域，而後提交
4. 回到項目主頁--點擊setting--找到github pages（source）--選擇master branch --save
5. 再次找到github pages，下面多一個地址，直接複製地址打開便可。

 

/************* git的安裝與命令 ********************/

1. 在github上發佈了項目以後，可使用git的命令在命令窗口即時上傳更新 你所修改過的內容，或者拿github上別人的項目到本身電腦上學習
2. 因此這裏第一步應該是安裝git
3. 點擊git安裝包，選擇安裝位置最好和你的項目是同一個盤（應爲有人安裝 在不一樣於項目文件夾的盤沒法識別git命令）
4. 安裝完成以後，在打算放置你項目的文件夾裏右擊鼠標，點擊git bash here
5. 而後按住shift和鼠標右鍵，點擊「在此打開命令行窗口」
6. 第一步：輸入 git clone + 你在github上發佈的項目的地址連接/ 你想要拿下來的別人的項目的地址連接 （這一步執行完後會在當前文件夾中出現克隆下來的項目（文件夾））
7. 若是是想修改本身的項目，而後上傳到github上去更新本身的項目，就能夠接着下面去作
8. 第二步：去修改本身的項目
9. 第三步： 輸入 git pull, 去更新如下項目（這是團隊合做時才須要，由於可能別人也作了修改，咱們在做出修改時，應該先更新別人的修改，獲得最新的一個版本後纔去作本身的修改，保持和其餘成員同步）
10. 第四步：輸入 git add . (添加文件)
11. 第五步：輸入 git commit -m "這裏是寫本身的註釋，能夠不寫，但最好就是寫" （-m是指提交到主幹，這條命令是在本地提交）
12. 第五步可能會出現要你告訴github你是誰，這時候輸入：congif --global user.email "這裏填寫你註冊github的郵箱"
13. 第六步：輸入 git push ,提交推送。
14. 完成啦，能夠去github上看看是否有更新！

 

/*********** 什麼是nodejs **************/

1. Node 是一個服務器程序。node.js其實和 Apache 或 Tomcat同樣至關於一個服務器
2. Node.js是一個Javascript運行環境，可以使得javascript脫離瀏覽器運行，能夠用來作服務器，也能夠用來像批處理一 樣執行某些任務。
3. 在前端開發裏通常是用來執行編譯 CSS 預編譯語言、預編譯、壓縮、混淆 JS、壓縮圖片、reload、deploy 等工程化任務，經常使用的平臺有 Grunt 和 Gulp。
4. AngularJS作前端，NodeJS作服務端，MongoDB作數據庫。NodeJS是一個代碼庫，方便只會js的人作站。
5. Node.js是用C++編寫的，是Javascript的運行環境，也就是說你能夠編寫系統級或者服務器端的Javascript代碼，交給N ode.js來解釋執行。Apache 和 Tomcat 也都是web服務器。Apache主要是用C編寫的，能夠編譯php；Tomcat主要是用Java編寫的，能夠編譯java。
6. 爲何服務器上要編譯js ／php／java 呢？由於有些網頁的複雜功能(業務邏輯等等)是用這些語言寫的，將這些語言編 寫的代碼放在雲服務器，而後經過雲服務器上的Node.js／Apache／Tomcat來進行編譯執行。
7. node是一個平臺，在這個平臺上用JavaScript語言寫應用。相似：java是一個平臺，在這個平臺上用java語言寫應用。

 

/*********** 什麼是babel **************/

1. JavaScript在不斷的發展，各類新的標準和提案層出不窮，可是因爲瀏覽器的多樣性，
致使可能幾年以內都沒法普遍普及.
2. babel可讓你提早使用這些語言特性，他是一種用途不少的javascript編譯器，他把最新版的javascript編譯成當下可 以執行的版本
3. 簡言之，利用babel就可讓咱們在當前的項目中隨意的使用這些新最新的es6，甚至es7的語法。
4. 說白了,就是把各類javascript千奇百怪的語言通通專爲瀏覽器能夠認識的語言。

 

/*********** 什麼是webpack **************/

1. WebPack能夠看作是模塊打包機：它作的事情是，分析你的項目結構，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），並將其打包爲合適的格式以供瀏覽器使用。
2. Webpack的工做方式是：把你的項目當作一個總體，經過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的全部依賴文件，使用loaders處理它們，最後打包爲一個瀏覽器可識別的JavaScript文件。
3. 在webpack看來一切都是模塊！這就是它不可不說的優勢，包括你的JavaScript代碼，也包括CSS和fonts以及圖片等等等 ，只有經過合適的loaders，它們均可以被當作模塊被處理。

 

/*********** webpack的安裝： **************/

1. 在nodejs已經安裝的前提下
2. 選擇地點新建一個關於webpack的文件夾
3. 打開文件夾，按住shift鍵，同時按下鼠標右鍵
4. 選擇「在此處打開命令行窗口」
5. 輸入「npm init」,提示輸入名字，能夠任意定義，但注意兩點：必定要小寫，並且不能用webpack，webpack是官方已經用了的（這時候已經生成了node_modules文件夾和一個package-lock.json文件）
6. 輸入「npm install --save-dev webpack」
7. 輸入npm -v 出現版本號的話說明安裝成功
8. 去新建的文件夾裏的node_modules文件夾裏看看是否已經有webpack文件夾了，有了說明成功了（這時候根目錄也會多了 一個package.json文件）

/*********** 安裝完webpack後，使用webpack來打包js模塊： *************/

1. 新建一個項目
2. 在項目裏新建一個html文件，在裏面引入下面會自動生成的編譯文件bundle.js文件。
3. 新建一個module.js文件，做爲模塊文件
4. 新建一個樣式文件style.css文件
5. 新建一個entry.js文件，做爲入口文件，在裏面import進來module.js文件裏的對外接口和style.css文件，以後就能夠寫一些想要執行的語句
6. 建立一個配置文件webpack.config.js文件，在裏面寫好入口和出口的配置信息
7. 在命令行窗口執行語句：webpack
8. 這個執行過程會自動調用webpack.config.js文件編譯生成bundle.js文件
9. 大功告成啦，快去看看最終結果是否正確吧！
（能夠經過npm install style-loader css-loader來安裝這兩個加載器）

 

/*********** node和webpack的關係 **************/

1. 由於webpack在執行打包壓縮的時候是依賴nodejs的，沒有nodejs就不能使用webpack
2. npm只是nodejs的一個模塊。npm 是 nodejs 的包管理工具，用於管理依賴。

 

 

/*****************************************************************/
分清楚 庫，框架，構建工具、 插件的做用。
你只須要引用或者調用，就能夠直接用，並不會對你作太多約束。那麼這種大部分都稱之爲庫。如jQuery
須要按照他的標準構建文件結構或者文件夾結構或者代碼書寫方式那麼這東西能夠稱之爲框架，通常框架都是多種組合在一塊兒的。如React+gulp 或者 jQuery mobile
解決開發過程當中重複或者須要自動化智能化完成事情，也就是構建工具。如grunt和gulp
基於 庫，框架，工具，提供的補充優化的模塊就叫作插件。

 

/*********** vue-cli的安裝： **************/

$ npm install -g vue-cli
$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

1.在nodejs的環境下， 安裝了vue-cli以後就集成安裝了webpack、vue庫、router庫（能夠去package.json文件中查看，若是沒有找到須要安裝的庫，那就去安裝）
2. 每次修改你的項目或者瀏覽項目效果時要作的只是運行編譯你的項目：npm run dev
3. 可是要使用vue的ajax功能，須要另外安裝vue-resource
4. 安裝方法：npm install vue-resource -S
5. 在項目的main.js文件裏導入vue-resource庫：
import VueResource from 'vue-resource';
Vue.use(VueResource);
6. 使用方法：（post是線上開發時用的，get是本地開發用的。有後端一塊兒合做項目時就須要用到下面的參數列表，那是傳遞給後臺的數據。僅前端開發時能夠省略掉，由於沒有後臺數據）
this.$http.post("http://localhost/test.php",{name:"zhangsan"},{emulateJSON:true}).then(
function (res) {
// 處理成功的結果
alert(res.body);
},function (res) {
// 處理失敗的結果
}
);

 

/*********** Vuex的安裝： **************/

1. npm install vuex --save
2. 導入：
import Vuex from 'vuex'
Vue.use(Vuex)

 

/*********** ElementUI的安裝： **************/

1. npm i element-ui -S
2. 引入：
在 main.js 中寫入如下內容：
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI)

 

/*********** ESlint的安裝： **************/

1. EsLint幫助咱們檢查Javascript編程時的語法錯誤。好比：在Javascript應用中，你很難找到你漏泄的變量或者方法。
EsLint可以幫助咱們分析JS代碼，找到bug並確保必定程度的JS語法書寫的正確性。
2. npm install eslint --save-dev（本地安裝）
3. 安裝和使用參考：http://eslint.cn/docs/user-guide/getting-started
參考：http://www.cnblogs.com/hahazexia/p/6393212.html

 

 

/*********** stylus的安裝： **************/

1. stylus是一個css預處理框架。來自node社區，主要用來給node項目進行css預處理支持
stylus文件後綴是 .styl
2. 安裝：npm install --save-dev stylus
3. 自動化編譯
1

新建example文件夾

2 新建demo.stly文件
3
新建/example/dist文件夾

4 打開命令行界面
輸入
stylus -w demo.styl -o dist

5 -w 是自動監視文件 -o 是將編譯後的CSS文件輸出到指定文件中

6 在demo.styl裏面寫內容，保存便可

。
4. 參考：http://wiki.jikexueyuan.com/project/harp-doc/Stylus.html
http://www.zhangxinxu.com/jq/stylus/selectors.php

/*********** 把表格導出到excel表的插件安裝： **************/
1. npm install -S file-saver xlsx
2. npm install -D script-loader
（安裝便可，不用引用）
3. 項目中新建一個文件夾：（vendor---名字任取），裏面放置兩個文件Blob.js和 Export2Excel.js。百度可下載。
4. 在.vue文件中寫這兩個方法：其中list是表格的內容
　　　　export2Excel() {
　　　　　　require.ensure([], () => {
　　　　　　　　const { export_json_to_excel } = require('../../vendor/Export2Excel');
　　　　　　　　const tHeader = ['序號', 'IMSI', 'MSISDN', '證件號碼', '姓名'];
　　　　　　　　const filterVal = ['ID', 'imsi', 'msisdn', 'address', 'name'];
　　　　　　　　const list = this.tableData;
　　　　　　　　const data = this.formatJson(filterVal, list);
　　　　　　　　export_json_to_excel(tHeader, data, '列表excel');
　　　　　　})
　　　　},
　　　　formatJson(filterVal, jsonData) {
　　　　　　return jsonData.map(v => filterVal.map(j => v[j]))
　　　　}
5. 注：若是webpack報解析錯誤：
在build----webpack.base.conf.js中resolve的alias加入 'vendor': path.resolve(__dirname, '../src/vendor'),便可解決。alias是配置別名

6. Blob.js和 Export2Excel.js文件：連接: http://pan.baidu.com/s/1nvSdw85 密碼: 5qhi