Skip to content

Commit 2c4a112

Browse files
committed
U
1 parent 4eeebc8 commit 2c4a112

File tree

2 files changed

+102
-101
lines changed

2 files changed

+102
-101
lines changed

learn-vue-cli/vue-cli.md

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
#1. vue-cli 简介
2+
3+
简单介绍
4+
5+
vue-cli 官网 [vuejs/vue-cli: Simple CLI for scaffolding Vue.js projects] (https://github.com/vuejs/vue-cli)
6+
7+
[视频:vue-cli 简介,与 套用 mint-ui demo (youtube) ] (https://youtu.be/AwjfG5T3vO4)
8+
9+
[视频:vue-cli 简介,与 套用 mint-ui demo (bilibili)] (http://www.bilibili.com/video/av6828349/)
10+
11+
12+
13+
14+
15+
#2. vue.js 2 vue-cli how to start
16+
17+
vue.js2 vue-cli 怎么搭起来的教学, 照到
18+
19+
$ sudo npm install -g vue-cli
20+
21+
$ vue init webpack my-project
22+
23+
$ cd my-project
24+
25+
$ npm install
26+
27+
$ npm run dev
28+
29+
#3. vue-cli 使用 Mint-UI, 入门篇
30+
31+
[ mint-UI for vuejs2 移动端 UI 库 ] (http://mint-ui.github.io/docs/#!/zh-cn2)
32+
33+
安装
34+
35+
$ npm install mint-ui -save
36+
37+
.vue script
38+
39+
// 本人重 vue 全家桶的讲解,怎么使用 ui库,跟此目标不符
40+
// 所有的 ui 库,使用原理,差不多,本示例,
41+
// 只讲一点点 ui 知识点,让你看个几分钟,就自已抓来用…
42+
43+
44+
// -- mint-ui start
45+
// http://mint-ui.github.io/docs/#!/zh-cn2/button
46+
// /my-project/node_modules/mint-ui/lib/button
47+
import mtButton from 'mint-ui/lib/button';
48+
import 'mint-ui/lib/button/style.css';
49+
50+
// http://mint-ui.github.io/docs/#!/zh-cn2/toast
51+
// /my-project/node_modules/mint-ui/lib/toast
52+
import { Toast } from 'mint-ui';
53+
import 'mint-ui/lib/toast/style.css';
54+
// -- mint-ui end
55+
56+
57+
** mint-ui 怎么用?(个人实测…有坑,但还是可以用) **
58+
59+
[demo mint-ui ] (https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/mint_ui1.html)
60+
61+
[源码:mint_ui1.html] (https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/mint_ui1.html)
62+
63+
[源码:mint_ui1.js] (https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/mint_ui1.js)
64+
65+
[源码:mint_ui1v.vue] (https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/mint_ui1v.vue)
66+
67+
*补充 mint_UI 点击问题修正**
68+
69+
- 关于事件绑定
70+
- 在 Vue 2.0 中,为自定义组件绑定原生事件必须使用 __.native__ 修饰符:
71+
72+
```js
73+
<my-component @click.native="handleClick">Click Me</my-component>
74+
```
75+
76+
- 从易用性的角度出发,我们对 __Button__ 组件进行了处理,使它可以监听 __click__ 事件:
77+
78+
```js
79+
<mt-button @click="handleButtonClick">Click Me</mt-button>
80+
```
81+
82+
- 但是对于其他组件,还是需要添加 __.native__ 修饰符。
83+
84+
85+
- 来源: http://mint-ui.github.io/docs/#!/zh-cn2
86+
87+
#4.多页应用
88+
89+
- 因为讲解 npm run dev , npm run build 这两种多页设置,所以会讲这么40分钟这么久。自已有经验的话,看代码来抄,比较快,真的是初学者,还是建议看完吧,没有人会讲这么细。
90+
91+
- vuejs2 多页应用讲解https://github.com/bhnddowinf/vuejs2-learn
92+
93+
使用 vue-cli 一定用到的多页应用
94+
95+
教你怎么跑 npm run dev, npm run build
96+
97+
> [视频: vue-cli 多页应用(youtube)](https://youtu.be/J-0Vl68uKyY)
98+
99+
> [视频:vue-cli 多页应用(百度云)](http://pan.baidu.com/s/1pL71opX)
100+
101+
> [视频:vue-cli 多页应用(http://www.bilibili.com/)](http://www.bilibili.com/video/av6805317/)

readme.md

Lines changed: 1 addition & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -71,107 +71,7 @@ vue.js 2 官网讲解(以下是自我要求,小凡,不要你花时间在 看
7171

7272
## 1. vue-cli
7373

74-
### 1-1. vue-cli 简介
75-
76-
简单介绍
77-
78-
vue-cli 官网 [vuejs/vue-cli: Simple CLI for scaffolding Vue.js projects] (https://github.com/vuejs/vue-cli)
79-
80-
[视频:vue-cli 简介,与 套用 mint-ui demo (youtube) ] (https://youtu.be/AwjfG5T3vO4)
81-
82-
[视频:vue-cli 简介,与 套用 mint-ui demo (bilibili)] (http://www.bilibili.com/video/av6828349/)
83-
84-
85-
86-
87-
88-
### 1-2. vue.js 2 vue-cli how to start
89-
90-
vue.js2 vue-cli 怎么搭起来的教学, 照到
91-
92-
$ sudo npm install -g vue-cli
93-
94-
$ vue init webpack my-project
95-
96-
$ cd my-project
97-
98-
$ npm install
99-
100-
$ npm run dev
101-
102-
### 1-3. vue-cli 使用 Mint-UI, 入门篇
103-
104-
[ mint-UI for vuejs2 移动端 UI 库 ] (http://mint-ui.github.io/docs/#!/zh-cn2)
105-
106-
安装
107-
108-
$ npm install mint-ui -save
109-
110-
.vue script
111-
112-
// 本人重 vue 全家桶的讲解,怎么使用 ui库,跟此目标不符
113-
// 所有的 ui 库,使用原理,差不多,本示例,
114-
// 只讲一点点 ui 知识点,让你看个几分钟,就自已抓来用…
115-
116-
117-
// -- mint-ui start
118-
// http://mint-ui.github.io/docs/#!/zh-cn2/button
119-
// /my-project/node_modules/mint-ui/lib/button
120-
import mtButton from 'mint-ui/lib/button';
121-
import 'mint-ui/lib/button/style.css';
122-
123-
// http://mint-ui.github.io/docs/#!/zh-cn2/toast
124-
// /my-project/node_modules/mint-ui/lib/toast
125-
import { Toast } from 'mint-ui';
126-
import 'mint-ui/lib/toast/style.css';
127-
// -- mint-ui end
128-
129-
130-
** mint-ui 怎么用?(个人实测…有坑,但还是可以用) **
131-
132-
[demo mint-ui ] (https://bhnddowinf.github.io/bhnddowinf/vuejs2demo/mint_ui1.html)
133-
134-
[源码:mint_ui1.html] (https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/mint_ui1.html)
135-
136-
[源码:mint_ui1.js] (https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/mint_ui1.js)
137-
138-
[源码:mint_ui1v.vue] (https://github.com/bhnddowinf/vuejs2-learn/blob/master/my-project/src/vuex-demo/mint_ui1v.vue)
139-
140-
*补充 mint_UI 点击问题修正**
141-
142-
- 关于事件绑定
143-
- 在 Vue 2.0 中,为自定义组件绑定原生事件必须使用 __.native__ 修饰符:
144-
145-
```js
146-
<my-component @click.native="handleClick">Click Me</my-component>
147-
```
148-
149-
- 从易用性的角度出发,我们对 __Button__ 组件进行了处理,使它可以监听 __click__ 事件:
150-
151-
```js
152-
<mt-button @click="handleButtonClick">Click Me</mt-button>
153-
```
154-
155-
- 但是对于其他组件,还是需要添加 __.native__ 修饰符。
156-
157-
158-
- 来源: http://mint-ui.github.io/docs/#!/zh-cn2
159-
160-
### 1-4.多页应用
161-
162-
- 因为讲解 npm run dev , npm run build 这两种多页设置,所以会讲这么40分钟这么久。自已有经验的话,看代码来抄,比较快,真的是初学者,还是建议看完吧,没有人会讲这么细。
163-
164-
- vuejs2 多页应用讲解https://github.com/bhnddowinf/vuejs2-learn
165-
166-
使用 vue-cli 一定用到的多页应用
167-
168-
教你怎么跑 npm run dev, npm run build
169-
170-
> [视频: vue-cli 多页应用(youtube)](https://youtu.be/J-0Vl68uKyY)
171-
172-
> [视频:vue-cli 多页应用(百度云)](http://pan.baidu.com/s/1pL71opX)
173-
174-
> [视频:vue-cli 多页应用(http://www.bilibili.com/)](http://www.bilibili.com/video/av6805317/)
74+
[vue-cli 教程文檔] (https://github.com/bhnddowinf/vuejs2-learn/blob/master/learn-vue-cli/vue-cli.md)
17575

17676
## 2.Vuex
17777

0 commit comments

Comments
 (0)