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