Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/qianyinghuanmie/vue2.0-demos

vue2.0-demos（mobile）
https://github.com/qianyinghuanmie/vue2.0-demos

Last synced: about 1 month ago
JSON representation

vue2.0-demos（mobile）

Lists

README 

        



    

    项目介绍



项目改版1(更新于2017-8-20)


项目构建


使用vue-cli起步 ，关于vue-cli


使用vue-router路由，关于vue-router


使用vuex处理业务 关于vuex


使用vue- resource 关于vue- resource


使用sass


基于mint-ui，关于mint-ui


当前涉及的demo


1、选择城市，字母排序


2、调用地图


3、使用v-charts图表


4、新增城市列表2，mint-ui中自带组件(更新于2017-09-15)


关于本项目


npm install报错是pinyin引起的(但不影响正常使用)，只想使用其他demo的，可以不安装pinyin


由于引入了mint-ui中的城市列表，将会逐渐取代原创的列表


改版之前


将页面公共头部提取为组件(更新于2017-5-5)


主要涉及(前期准备)：




  1.引入汉字转拼音的插件，利用NPM安装 代码指令为  npm install pinyin --save ，详细步骤请到 pinyin


  2.引入vue-resource，调用json文件，可以参考目录中的city.json,有条件的也可以自己去扒


新增高德地图demo(更新于2017-6-15)


主要涉及(前期准备)


1.引入高德地图api

  注意：为方便演示效果，此项目中使用了个人开发者的高德秘钥，请自行去替换成自己的。


新增 vcharts(更新于2017-8-8)  



<!--

#myContain .myH3{

  background-color: #e2e7e6;

  color: darkgoldenrod;

  line-height:3rem;

  text-indent: 1em;

  font-size: 20px;

}

#myContain p{

  padding-left: 2em;

  line-height: 1.4em;

  font-size: 15px;

}

#myContain p .myImg{

  width: 700px!important;

  height: auto;

}

#myContain a{

  color: darkorange;

}

#myContain .myH5{

  text-indent: 3em;

  font-size: 16px;

  color: cornsilk;

  background-color: darkgray;

  line-height:2em;

}

.notice{

  color: red;

}

.smallTitle{

  font-size: 14px;

  color: brown;

}

</html>



/* 

<h2>Special Note</h2>



``` bash

  If you Want get demo---If you want to achieve a small demo(but not exist in this project)， you can put specific needs on Issues，the

author or contributors  will find time in their own ability to go To achieve，



  If you want to contribute---If you want to contribute their own demo，according  to  examples in the directory，a separate vue，Then Configuration Route，And pull  request

If you want to import new package，please note。

```



<h3 class="myH3">(Updated on 2018-1-21)</h3>

<h5><a href="./Log">Update log</a></h5>



![image](https://qianyinghuanmie.github.io/vue2.0-demos/dist/static/help.gif)



<h3 class="myH3">Construction</h3>

<p>Start with vue-cli, ，<a href="https://github.com/vuejs/vue-cli">about vue-cli</a></p>

<p>Using vue-router routing，<a href="https://github.com/vuejs/vue-cli">about vue-router</a></p>

<p>Use vuex processing business <a href="https://github.com/vuejs/vuex">about vuex</a></p>

<p>Use vue-resource<a href="https://github.com/pagekit/vue-resource">about vue-resource</a></p>

<p>Use sass <a href="https://github.com/sass/sass">about sass</a></p>

<p>Based on element-ui ，<a href="http://element.eleme.io/#/zh-CN/component/quickstart">about element-ui</a></p>

<p>Based on mint-ui，<a href="https://github.com/ElemeFE/mint-ui">about mint-ui</a></p>

<p>Introduction of vue-touch（this gesture plug-in is another vue-touch branch and support vue2.0），<a href="https://github.com/vuejs/vue-touch/tree/next">about vue-touch</a></p>

<p>Use Ali font，<a href="http://www.iconfont.cn/home/index">about Ali font</a></p>

<h3 class="myH3">demos  list</h3>

<p>1、select the city, alphabetical order</p>

<p>2、use high Germany map</p>

<p>3、use v-charts</p>

<p>4、use vue-picture-input  preview</p>

<p>5、use the element-ui image upload components</p>

<p>6、city list, from mint-ui </p>

<p>7、the introduction of vur-touch</p>

<p>8、Ali font </p>

<p>9、add select time components</p>

<p>10、add Provincial linkage components</p>

<h3 class="myH3">tutorials list</h3>

<p>1、 to be a city of choice</p>

<p>2、use high Germany map</p>

<p>3、use high Germany map (about 'around' component )</p>



According to the following command to run ,or according  to[my blog](http://www.cnblogs.com/star-wind/)



## Build Setup



``` bash

# install dependencies

npm install



# serve with hot reload at localhost:8080

npm run dev



# build for production with minification

npm run build



# build for production and view the bundle analyzer report

npm run build --report

```



For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader). */