Skip to content

Commit 159a9ef

Browse files
coderjamcoderjam
committed
cli 项目 引入 uview
1 parent 99c6002 commit 159a9ef

File tree

157 files changed

+38912
-47996
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

157 files changed

+38912
-47996
lines changed

‎my-project-vue2/package-lock.json

Lines changed: 0 additions & 37096 deletions
This file was deleted.

‎my-project-vue2/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@
7171
"core-js": "^3.6.5",
7272
"flyio": "^0.6.2",
7373
"regenerator-runtime": "^0.12.1",
74-
"uview-ui": "^1.8.4",
7574
"vue": "^2.6.11",
7675
"vuex": "^3.2.0"
7776
},
@@ -95,7 +94,9 @@
9594
"jest": "^25.4.0",
9695
"mini-types": "*",
9796
"miniprogram-api-typings": "*",
97+
"node-sass": "4.14.1",
9898
"postcss-comment": "^2.0.0",
99+
"sass-loader": "^10.1.1",
99100
"vue-template-compiler": "^2.6.11"
100101
},
101102
"browserslist": [

‎my-project-vue2/src/App.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
}
1313
</script>
1414

15-
<style>
16-
/*每个页面公共css */
15+
<style lang="scss">
16+
/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
17+
@import "uview-ui/index.scss";
1718
</style>

‎my-project-vue2/src/main.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
import Vue from 'vue'
22
import App from './App'
3+
import uView from "uview-ui";
34

45
Vue.config.productionTip = false
5-
66
App.mpType = 'app'
7+
Vue.use(uView);
78

89
const app = new Vue({
910
...App

‎my-project-vue2/src/pages.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
{
2+
"easycom": {
3+
"^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
4+
},
25
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
36
{
47
"path": "pages/index/index",

‎my-project-vue2/src/pages/index/index.vue

Lines changed: 36 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,54 @@
22
<view class="content">
33
<image class="logo" src="/static/logo.png"></image>
44
<view>
5-
<text class="title">{{title}}</text>
5+
<text class="title">{{ title }}</text>
66
</view>
7+
<u-button>默认按钮</u-button>
8+
<u-button type="primary">主要按钮</u-button>
9+
<u-button type="success">成功按钮</u-button>
10+
<u-button type="info">信息按钮</u-button>
11+
<u-button type="warning">警告按钮</u-button>
12+
<u-button type="error">危险按钮</u-button>
713
</view>
814
</template>
915

1016
<script>
11-
export default {
12-
data() {
13-
return {
14-
title: 'Hello lanba!'
15-
}
16-
},
17-
onLoad() {
17+
export default {
18+
data() {
19+
return {
20+
title: 'Hello lanba jam!'
21+
}
22+
},
23+
onLoad() {
1824
19-
},
20-
methods: {
25+
},
26+
methods: {
2127
22-
}
2328
}
29+
}
2430
</script>
2531

2632
<style>
27-
.content {
28-
display: flex;
29-
flex-direction: column;
30-
align-items: center;
31-
justify-content: center;
32-
}
33+
.content {
34+
display: flex;
35+
flex-direction: column;
36+
align-items: center;
37+
justify-content: center;
38+
}
3339
34-
.logo {
35-
height: 200rpx;
36-
width: 200rpx;
37-
margin: 200rpx auto 50rpx auto;
38-
}
40+
.logo {
41+
height: 200rpx;
42+
width: 200rpx;
43+
margin: 200rpx auto 50rpx auto;
44+
}
3945
40-
.text-area {
41-
display: flex;
42-
justify-content: center;
43-
}
46+
.text-area {
47+
display: flex;
48+
justify-content: center;
49+
}
4450
45-
.title {
46-
font-size: 36rpx;
47-
color: #8f8f94;
48-
}
51+
.title {
52+
font-size: 36rpx;
53+
color: #8f8f94;
54+
}
4955
</style>

‎my-project-vue2/src/uni.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,9 @@
1212
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
1313
*/
1414

15-
/* 颜色变量 */
15+
@import 'uview-ui/theme.scss';
16+
17+
/* 颜色变量 */
1618

1719
/* 行为相关颜色 */
1820
$uni-color-primary: #007aff;

‎my-project-vue2/src/uview-ui/LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 www.uviewui.com
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎my-project-vue2/src/uview-ui/README.md

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
<p align="center">
2+
<img alt="logo" src="https://uviewui.com/common/logo.png" width="120" height="120" style="margin-bottom: 10px;">
3+
</p>
4+
<h3 align="center" style="margin: 30px 0 30px;font-weight: bold;font-size:40px;">uView</h3>
5+
<h3 align="center">多平台快速开发的UI框架</h3>
6+
7+
8+
## 说明
9+
10+
uView UI，是[uni-app](https://uniapp.dcloud.io/)生态优秀的UI框架，全面的组件和便捷的工具会让您信手拈来，如鱼得水
11+
12+
## 特性
13+
14+
- 兼容安卓，iOS，微信小程序，H5，QQ小程序，百度小程序，支付宝小程序，头条小程序
15+
- 60+精选组件，功能丰富，多端兼容，让您快速集成，开箱即用
16+
- 众多贴心的JS利器，让您飞镖在手，召之即来，百步穿杨
17+
- 众多的常用页面和布局，让您专注逻辑，事半功倍
18+
- 详尽的文档支持，现代化的演示效果
19+
- 按需引入，精简打包体积
20+
21+
22+
## 安装
23+
24+
```bash
25+
# npm方式安装
26+
npm i uview-ui
27+
```
28+
29+
## 快速上手
30+
31+
1. `main.js`引入uView库
32+
```js
33+
// main.js
34+
import uView from 'uview-ui';
35+
Vue.use(uView);
36+
```
37+
38+
2. `App.vue`引入基础样式(注意style标签需声明scss属性支持)
39+
```css
40+
/* App.vue */
41+
<style lang="scss">
42+
@import "uview-ui/index.scss";
43+
</style>
44+
```
45+
46+
3. `uni.scss`引入全局scss变量文件
47+
```css
48+
/* uni.scss */
49+
@import "uview-ui/theme.scss";
50+
```
51+
52+
4. `pages.json`配置easycom规则(按需引入)
53+
54+
```js
55+
// pages.json
56+
{
57+
"easycom": {
58+
// npm安装的方式不需要前面的"@/"，下载安装的方式需要"@/"
59+
// npm安装方式
60+
"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
61+
// 下载安装方式
62+
// "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
63+
},
64+
// 此为本身已有的内容
65+
"pages": [
66+
// ......
67+
]
68+
}
69+
```
70+
71+
请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容
72+
73+
## 使用方法
74+
配置easycom规则后，自动按需引入，无需`import`组件，直接引用即可。
75+
76+
```html
77+
<template>
78+
<u-button>按钮</u-button>
79+
</template>
80+
```
81+
82+
请通过[快速上手](https://uviewui.com/components/quickstart.html)了解更详细的内容
83+
84+
## 链接
85+
86+
- [官方文档](https://uviewui.com/)
87+
- [更新日志](https://uviewui.com/components/changelog.html)
88+
- [升级指南](https://uviewui.com/components/changelog.html)
89+
- [关于我们](https://uviewui.com/cooperation/about.html)
90+
91+
## 预览
92+
93+
您可以通过**微信**扫码，查看最佳的演示效果。
94+
<br>
95+
<br>
96+
<img src="https://uviewui.com/common/weixin_mini_qrcode.png" width="220" height="220" >
97+
98+
<!-- ## 捐赠uView的研发
99+
100+
uView文档和源码全部开源免费，如果您认为uView帮到了您的开发工作，您可以捐赠uView的研发工作，捐赠无门槛，哪怕是一杯可乐也好(相信这比打赏主播更有意义)。
101+
102+
<img src="https://uviewui.com/common/wechat.png" width="220" >
103+
<img style="margin-left: 100px;" src="https://uviewui.com/common/alipay.png" width="220" >
104+
-->
105+
## 版权信息
106+
uView遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议，意味着您无需支付任何费用，也无需授权，即可将uView应用到您的产品中。

0 commit comments

Comments
 (0)