Vue项目目录说明

## 一、Vue项目目录说明
### 1. 项目目录展示及说明
– 使用tree 命令生成的目录结构,删减掉了node_modules中的内容(主要为依赖包,并且内容太长)
– views 文件夹下面是由 以页面为单位的 vue 文件 或者 模块文件夹 组成的,放在 src 目录之下,与 components、assets 同级。

“`
│ .babelrc # 配置babel的配置文件,可以根据自己需求配置babel,一般默认
│ .DS_Store # mac中产生的隐藏文件,不需要管理
│ .editorconfig # 编辑器配置文件,可以按需自己配置,一般默认
│ .eslintignore # eslint忽略文件,可以按需自己配置,一般默认
│ .eslintrc.js # eslint配置文件,可以按需自己配置,一般默认
│ .gitignore # git忽略文件,可以按需自己配置
│ .postcssrc.js # postcss配置文件,可以按需自己配置,一般默认
│ index.html # 首页入口
│ package-lock.json # 定义了开发时所使用的模块依赖的版本,使用npm install时使用该文件
│ package.json # 定义了这个项目所需要的各种模块,以及项目的配置信息
│ README.md # 项目简介,说明文档

├─.git # git仓库相关内容,自动生成不需要处理

├─.idea # 编辑器自动生成不需要处理

├─build # webpack配置相关(开发环境、生产环境),一般使用默认,可修改配置
│ build.js
│ check-versions.js
│ logo.png
│ utils.js
│ vue-loader.conf.js
│ webpack.base.conf.js
│ webpack.dev.conf.js
│ webpack.prod.conf.js

├─config # 配置文件(路径、端口、代理等),一般使用默认,可修改配置
│ dev.env.js
│ index.js
│ prod.env.js

├─dist # 生产出来的目录文件,包含一个index.html文件和一个static文件夹用于部署
│ │ index.html
│ │
│ └─static

├─node_modules # 所安装的依赖包
├─src # 源文件
│ │ App.vue # 主组件,所有页面都是在App.vue下进行切换的
│ │ main.js # 入口文件,初始化vue实例并使用需要的插件
│ │
│ ├─assets
│ │ │ logo.png
│ │ │
│ │ └─css
│ │ └─ app.css
│ │
│ ├─components # 开发的组件
│ │ ButtonBarItem.vue
│ │
│ ├─views# 开发的页面存放
│ │ │─ car
│ │ │ │ CarEditPage.vue
│ │ │ └─ CarListPage.vue
│ │ └─ bus
│ │ │ BusEditPage.vue
│ │ └─ BusListPage.vue
│ │
│ └─router # 路由配置
│ index.js

└─static #静态资源,图片、字体可以放在这里
.gitkeep
“`

资料:
* [babel资料](https://www.babeljs.cn/)
* [vue-cli的webpack模板项目配置文件分析](https://github.com/hehongwei44/my-blog/issues/205)
* [eslint资料](http://eslint.cn/)
* [webpack](https://webpack.docschina.org/concepts/)
* [package.json](http://javascript.ruanyifeng.com/nodejs/packagejson.html)

weex开发中遇到的坑

# 关于weex 开发

## 1.安装weex
– 在开发时,如果需要从头开始部署项目,需要安装weex 然后使用weex构建项目(此步骤在官方文档中有,不再描述)

– 如果是多页面开发,在初始化构建项目时,选择不使用vue-router(使用weex create app时,会有此选项)

– 在创建项目的最后一步(weex create app的最后一步)会询问你使用npm 安装还是yarn安装依赖,在此步骤时,我选择npm或者yarn安装依赖后都会出错,所以我选择第三项步进行安装,然后进入文件目录 执行`npm i`,自己手动安装依赖

– 在安装过程中出现的错误,多数都可以解决,读取他的报错信息,不会的就百度,百度看完前十页,如果还解决不了就讨论

## 2.关于weex 中样式和标签问题

– 样式单位中目前只能使用 px

– image 标签使用时一定要定义宽高,注意使用`resize`的属性,并且image标签只能够使用px

## 3.关于weex stream发其post请求示例

– stream中get方法提交的参数必须组织出来放到url中

– stream中post方法提交的参数需要转换成`key=value&key=value`的形式,可以使用`utils/utils.js`中的`toParams`方法来转换

– post请求时注意添加 headers ,`{“Content-Type”: ‘application/x-www-form-urlencoded’}`

“`javascript
//post请求
stream.fetch({
url:’/login/login’,
method:’post’,
type:’json’,
headers:{“Content-Type”: ‘application/x-www-form-urlencoded’},
body:utils.toParams({
name: u,
password: p,
ip: ‘192.168.191.1’,
mac: ’00:00:00:00:00′,
platform: 2,
version: ‘Version_0.1’,
address: ”,
device: SystemUtils.getExplore(),
system: SystemUtils.getOS()
})
}, function(ret) {
if(!ret.ok){
// me.getJsonpResult = “request failed”;
console.log(‘chucuo’)
}else{
console.log(JSON.stringify(ret));
// me.getJsonpResult = JSON.stringify(ret.data);
}
})
“`
## 4.关于weex stream

– 进行了一次简单的封装,主要是简单封装了get方法和post方法,详细代码查看`utils/req.js`

– 将基础的url单独抽出来配置在`utils/baseConfig.js`,详细代码查看`utils/baseConfig.js`

– 将api接口 单独抽出来配置在 `utils/api.js`,详细代码查看`utils/api.js`

– 一个简单的调用示例demo

“`javascript
//post请求
//引入所需要的配置文件
import utils from ‘../utils/utils.js’
import $_http from ‘../utils/req.js’
import api from ‘../utils/api.js’
import SystemUtils from ‘../utils/SystemUtils.js’

//methods里面的方法
postUserData(u,p){
let that = this
let url = api.LOGIN_URL //配置在api中的url
let params = {
name: u,
password: p,
ip: ‘192.168.191.1’,
mac: ’00:00:00:00:00′,
platform: 2,
version: ‘Version_0.1’,
address: ‘,
device: SystemUtils.getExplore(),
system: SystemUtils.getOS()
}
let successFunc = function(d){
let data = JSON.parse(d)
if(data.meta.success){
console.log(data.data.uid)
that.setItem(‘uid’,data.data.uid,(e)=>{
if(e.result===’success’){
that.jumpPage()
}
})
}
}

$_http.post(url,params,successFunc)

}

//get请求
import $_http from “../utils/req.js”;
import api from “../utils/api.js”;

getTypeData() {
let that = this;
let url = api.TYPEONE_URL;
let sccuessFunc = function(d) {
let typeData = JSON.parse(d);
that.typeDataList = typeData.data;
};
$_http.get(url, {}, sccuessFunc);
}

“`

## 5. 本地图片路径

– 本地图片路径基于 web端运行时的相对路径,如果运行的项目为`dist/index.js`,在与`dist`同级下有个`images`的文件夹,那么在index中引入图片的路径为`../images/*.png`

## 6. 传值问题
– 正向传值:可以在navigator中直接push,如` url: utils.getJumpBaseUrl(“WorkPage.js?id=123”),`在下个页面使用以下方法收取参数` var bundleUrl = this.$getConfig().bundleUrl;this.id = utils.getParameterByName(“id”, bundleUrl);`

– 反向传值:使用`BroadcastChannel `进行通信,
[资料](http://weex.apache.org/cn/references/broadcast-channel.html)

“`javascript
//父页面
var self = this;
// 定义BroadcastChannel,用于响应子页面发来的广播
const broadcast = new BroadcastChannel(‘testChannel’)
broadcast.onmessage = function (event) {
self.title = event.data;
}

//子页面,发送消息,并pop
goBack(){
// 发送通知消息
const broadcast= new BroadcastChannel(‘testChannel’);
broadcast.postMessage(‘this is amessage.’);
navigator.pop()
}
“`
## 7. stroage问题

– stroage.getItem是异步

Javascript 与原生交互规范

## Javascript 与原生交互规范
### 一、交互规范
#### Javascript 与原生应用交互
– 前端调用原生
假设原生有个 native 方法叫做 `doLogin()`
“`
//Android 原生方法
window.android.doLogin();
//如果是IOS,使用方法为直接写方法名
doLogin();
“`
– 前端向原生传值
假设原生有个 native 方法叫做 `doLogin(username, password)`
“`
//Android 原生方法
window.android.doLogin(username, password);
//如果是IOS,使用方法为直接写方法名
doLogin(username, password);
“`
– 接收原生传递过来的参数
定义一个方法:
“`
doLogin: function(username:String, password:String) {
// 获得 username 和 password
}
“`
– 假设在 vue 环境中,接收原生传递过来的参数
跟传统 Javascript 和原生交互基本类似,但是需要额外把方法声明到全局: `window.doLogin = this.doLogin`才可被进行调用,因为 vue 中生命的方法是局部方法,需要暴露出去称为全局方法才可以被原生调用
– 从原生获取数据然后进行请求
没有直接传值的办法,只能通过 1、3 结合来迂回进行。
### 二、命名规范
遵从 Javascript 常用规范,具体还需要前端和原生进行约定。假设有**从原生获取数据然后进行请求**的需求,那么方法和回调方法应具备一定的关联性。例如:
– 从原生获取数据,先通知原生,我要 UserID,原生定义一个 getUserID 方法。
“`
//Android 原生方法
window.android.getUserID();
//如果是IOS,使用方法为直接写方法名
getUserID();
“`
– 原生调用 Javascript 方法间接传值,**以原生方法为关联,把前缀替换成 on,并在发生异常时调用 Javascript 的 onError 方法。不需要传值的情况按需进行添加,建议不需要传值也加上回调,方便异常信息查找**
“`
onUserID: function(userID:String) {
// 获得 UserID
}
“`
“`
// 定义异常方法,一般是把异常显示出来
// @param fname 原生方法名称,可用来识别哪个方法传递过来的异常
// @param exception 异常信息
onError: function(fname:String, exception:String) {
switch(fname){
case “getUserID”:
break;
default:
}
}
“`

使用node将excel数据转换为json格式数据

这里我用到的模块是“node-xlxs”,当然还有其他评价比较高的js-xlsx,但是使用有点复杂,所以这里演示node-xlxs的使用。

好吧直接上来贴代码

“` javascript
var xlsx2json = require(“node-xlsx”);

var list = xlsx2json.parse(“./test.xlsx” );

console.log(list[0].data[0][2]);

“`
list中的数据格式

[

{name:’sheet1′,data:[[object],[object]]}

{name:’sheet2′,data:[[object],[object]]}

{name:’sheet3′,data:[[object],[object]]}

]

数据格式是一个数组对象,所以我们可以获取到我们想要的数据,如sheet1中的数据则是list[0].data。我们进一步测试data中的数据格式如下

data:
[

[ ],
[ ]

]

也是一个数组,数据中的每个数组则是代表了excel中每一行的数据

其中test.xls是你要转换的excel表,list[0]就是Excel中的sheet1,data[0][2]则是第一行中的第三个格子的数据

[详细内容](https://www.npmjs.com/package/node-xlsx)
“`
npm i –save-dev node-xlxs

“`

哒哒哒社区

哒哒哒社区

https://nobb.xlelou.cc

 

欢迎来到哒哒哒 社区!

哒哒哒社区由中国东营的一名咸鱼程序猿更具开源框部署而来,2017年12月4日,哒哒哒社区从腾讯云的临时测试服务器迁移到阿里云的服务器(2017年11月28日才开始在测试服务器上学习部署和使用),迁移过程中遇到了各种问题各种坑,总结一句话:头发短见识短,不过问题都解决了,网站也配备了https,比较值得欣慰。

目前用户较少,社区相关规定比较简单,大致如下:

  • 1.文明礼貌发言,不侮辱或者诽谤他人,不进行人身攻击,不挑事、闹事。
  • 2.禁止发布暴力色情等相关内容。
  • 3.禁止传播谣言。
  • 4.请大家暂时遵守以上约定,如出现非常严重情况封IP封账号。
  • 5.其余没有了,这是一个开放自由的社区。

关于板块内容

  • 目前只想到这些相关内容,建立初期初定,后期还会修改,如果您有什么好的意见或者提议可以联系我,如果您是注册账户可以直接点我头像发起聊天,我如果在线会收到你的消息不在线邮件会收到你发送的消息,直接加微信也可以:xlelou。

其余的没有了,在这里你可以谈技术、谈人生、谈理想、谈恋爱谈啥都行,支持各种原创内容的发表,也可以发布求职信息等类似话题。

玩的开心就行吧。

py2.7 json.loads输出中文

#coding= utf-8
import urllib
import urllib2
import sys
reload(sys)
sys.setdefaultencoding(‘utf8’)
import json
from bs4 import BeautifulSoup
tags = []
url = ‘https://movie.douban.com/j/search_tags?type=movie’
request = urllib2.Request(url)
response = urllib2.urlopen(request,timeout=20)
result = response.read()
result = json.loads(result)
result = json.dumps(result, ensure_ascii=False)
print result

express cookie sessionStorage

npm install express-generator -g

express –view=pug myapp

cd myapp

npm install

DEBUG=myapp:*npm start //LINUX/mac下

set DEBUG=myapp:* &npm start  //windows下

 

进入 public 文件夹下

 

sessionStorage 例子

getItem(key) 和 setItem(key,value) 还有 removeItem(key)和clear()清除所有
$('.tab-pane #iKnow').each(function(){
if(sessionStorage.getItem('item_'+$('.tab-pane #iKnow').index($('#iKnow'))) == 'hidden_' + $('.tab-pane #iKnow').index($(this)))   {
   $(this).parents('.set-exam-top-tips').css('display','none');
         $('.set-exam-body-right').css('top',initTop+ 'px')
}

$(this).click(function(){
   sessionStorage.setItem('item_'+$('.tab-pane #iKnow').index($(this)),'hidden_' + $('.tab-pane #iKnow').index($(this)))
      $(this).parents('.set-exam-top-tips').addClass('dsn');
      $('.set-exam-body-right').css('top',initTop+ 'px')
   }) 
 })


cookie

载入cookie.js

$.cookie(‘the_cookie’, ‘myValue’); 设置一个cookie
$.cookie(‘the_cookie’, ‘myValue’, { expires: 7 }); 创建一个 有效值为7天的cookie
$.cookie(‘the_cookie’, ‘the_value’, { expires: 7, path: ‘/’ }); 设置有效路径

注:在默认情况下,只有设置 cookie的网页才能读取该 cookie。如果想让一个页面读取另一个页面设置的cookie,必须设置cookie的路径。cookie的路径用于设置能够读取 cookie的顶级目录。将这个路径设置为网站的根目录,可以让所有网页都能互相读取 cookie (一般不要这样设置,防止出现冲突) 。
$.cookie(‘the_cookie’) 读取cookie 若不存在为null
$.cookie(‘the_cookie’,null) 删除cookie的值

相关参数的解释

1).expires: 365

定义cookie的有效时间,值可以是一个数字(从创建cookie时算起,以天为单位)或一个Date 对象。如果省略,那么创建的cookie是会话cookie,将在用户退出浏览器时被删除。

2).path: ‘/’

默认情况:只有设置cookie的网页才能读取该cookie。定义cookie的有效路径。默认情况下, 该参数的值为创建 cookie 的网页所在路径(标准浏览器的行为) 。

如果你想在整个网站中访问这个cookie需要这样设置有效路径:path: ‘/’。如果你想删除一个定义了有效路径的 cookie,你需要在调用函数时包含这个路径:$.cookie(‘the_cookie’, null,

{ path: ‘/’ });。 domain: ‘example.com’

默认值:创建 cookie的网页所拥有的域名。

3).secure: true

默认值:false。如果为true,cookie的传输需要使用安全协议(HTTPS)。

4).raw: true

默认值:false。

默认情况下,读取和写入 cookie 的时候自动进行编码和解码(使用encodeURIComponent 编码,decodeURIComponent 解码)。要关闭这个功能设置 raw: true 即可。

张三丰见到张翠山自刎时的悲痛,谢逊听到张无忌死讯时的伤心,书中写得太也肤浅了,真实人生中不是这样的。因为那时候我还不明白。——金庸

关于前端是用browser-sync的快速上手技巧

1. 安装 Node.js

BrowserSync是基于Node.js的, 是一个Node模块, 需要先安装Node.js
安装适用于Mac OS,Windows和Linux


2. 安装 BrowserSync

从Node.js的包管理(NPM)库中 安装BrowserSync。打开一个终端窗口,运行以下命令:

npm install -g browser-sync

 

结合gulpjsgruntjs构建工具来使用,构建的项目里运行下面的命令:

npm install --save-dev browser-sync


3. 启动 BrowserSync

静态网站

监听.css文件, BrowserSync 将启动一个小型服务器,并提供一个URL来查看您的网站。

// --files 路径是相对于运行该命令的项目(目录) 
browser-sync start --server --files "css/*.css"

监听多个类型的文件,您只需要用逗号隔开。例如再加入一个.html文件

// --files 路径是相对于运行该命令的项目(目录) 
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深,可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件。 
browser-sync start --server --files "**/*.css, **/*.html"
// 监听css文件 
browser-sync start --server --files "css/*.css"
// 监听css和html文件 
browser-sync start --server --files "css/*.css, *.html"

动态网站

已经有其他本地服务器环境PHP或类似的,需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站。

// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"

在本地创建了一个PHP服务器环境,并通过绑定Browsersync.cn来访问本地服务器,使用以下命令方式,Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn,并监听其css目录下的所有css文件。

browser-sync start --proxy "Browsersync.cn" "css/*.css"

新手入门指导:Vue 2.0 的建议学习顺序

起步

1. 扎实的 JavaScript / HTML / CSS 基本功。这是前置条件。

2. 通读官方教程 (guide) 的基础篇。不要用任何构建工具,就只用最简单的 <script>,把教程里的例子模仿一遍,理解用法。不推荐上来就直接用 vue-cli 构建项目,尤其是如果没有 Node/Webpack 基础。

3. 照着官网上的示例,自己想一些类似的例子,模仿着实现来练手,加深理解。

4. 阅读官方教程进阶篇的前半部分,到『自定义指令 (Custom Directive) 』为止。着重理解 Vue 的响应式机制和组件生命周期。『渲染函数(Render Function)』如果理解吃力可以先跳过。

5. 阅读教程里关于路由和状态管理的章节,然后根据需要学习 vue-router 和 vuex。同样的,先不要管构建工具,以跟着文档里的例子理解用法为主。
6. 走完基础文档后,如果你对于基于 Node 的前端工程化不熟悉,就需要补课了。下面这些严格来说并不是 Vue 本身的内容,也不涵盖所有的前端工程化知识,但对于大型的 Vue 工程是前置条件,也是合格的『前端工程师』应当具备的知识。

前端生态/工程化

1. 了解 JavaScript 背后的规范,ECMAScript 的历史和目前的规范制定方式。学习 ES2015/16 的新特性,理解 ES2015 modules,适当关注还未成为标准的提案

2. 学习命令行的使用。建议用 Mac。

3. 学习 Node.js 基础。建议使用 nvm 这样的工具来管理机器上的 Node 版本,并且将 npm 的 registry 注册表配置为淘宝的镜像源至少要了解 npm 的常用命令,npm scripts 如何使用,语义化版本号规则,CommonJS 模块规范(了解它和 ES2015 Modules 的异同),Node 包的解析规则,以及 Node 的常用 API。应当做到可以自己写一些基本的命令行程序。注意最新版本的 Node (6+) 已经支持绝大部分 ES2015 的特性,可以借此巩固 ES2015。

4. 了解如何使用 / 配置 Babel 来将 ES2015 编译到 ES5 用于浏览器环境。

5. 学习 Webpack。Webpack 是一个极其强大同时也复杂的工具,作为起步,理解它的『一切皆模块』的思想,并基本了解其常用配置选项和 loader 的概念/使用方法即可,比如如何搭配 Webpack 使用 Babel。学习 Webpack 的一个挑战在于其本身文档的混乱,建议多搜索搜索,应该还是有质量不错的第三方教程的。英文好的建议阅读 Webpack 2.0 的文档,比起 1.0 有极大的改善,但需要注意和 1.0 的不兼容之处

Vue 进阶

1. 有了 Node 和 Webpack 的基础,可以通过 vue-cli 来搭建基于 Webpack ,并且支持单文件组件的项目了。建议用 webpack-simple 这个模板开始,并阅读官方教程进阶篇剩余的内容以及 vue-loader 的文档,了解一些进阶配置。有兴趣的可以自己亲手从零开始搭一个项目加深理解。

2. 根据 例子 尝试在 Webpack 模板基础上整合 vue-router 和 vuex
3. 深入理解 Virtual DOM 和『渲染函数 (Render Functions)』这一章节(可选择性使用 JSX),理解模板和渲染函数之间的对应关系,了解其使用方法和适用场景。

4. (可选)根据需求,了解服务端渲染的使用(需要配合 Node 服务器开发的知识)。其实更重要的是理解它所解决的问题并搞清楚你是否需要它。
5. 阅读开源的 Vue 应用、组件、插件源码,自己尝试编写开源的 Vue 组件、插件。

6. 参考 贡献指南 阅读 Vue 的源码,理解内部实现细节。(需要了解 Flow

7. 参与 Vue GitHub issue 的定位 -> 贡献 PR -> 加入核心团队 -> 升任 CTO -> 迎娶白富美…(误

 

 

原文 http://www.cnblogs.com/lhb25/p/vue-turtoials-for-new-starter.html