Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 22a899b

Browse filesBrowse files
ulivzulivz
committed
初始化
0 parents  commit 22a899b
Copy full SHA for 22a899b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
Dismiss banner
Expand file treeCollapse file tree

83 files changed

+48703
-0
lines changed

‎.gitignore

Copy file name to clipboard
+5Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.DS_Store
2+
node_modules/
3+
dist/
4+
.idea/
5+
npm-debug.log

‎2.0.0

Copy file name to clipboard
+111Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
C:\Users\C\AppData\Roaming\npm\webpack -> C:\Users\C\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
2+
- amdefine@1.0.1 node_modules\webpack\node_modules\amdefine
3+
- wordwrap@0.0.2 node_modules\webpack\node_modules\cliui\node_modules\wordwrap
4+
- memory-fs@0.2.0 node_modules\webpack\node_modules\enhanced-resolve\node_modules\memory-fs
5+
- pbkdf2-compat@2.0.1 node_modules\webpack\node_modules\pbkdf2-compat
6+
- async@0.9.2 node_modules\webpack\node_modules\watchpack\node_modules\async
7+
- source-map@0.4.4 node_modules\webpack\node_modules\webpack-core\node_modules\source-map
8+
- clone@1.0.2 node_modules\webpack\node_modules\clone
9+
- optimist@0.6.1 node_modules\webpack\node_modules\optimist
10+
- webpack-core@0.6.9 node_modules\webpack\node_modules\webpack-core
11+
C:\Users\C\AppData\Roaming\npm
12+
`-- webpack@2.2.1
13+
+-- acorn@4.0.11
14+
+-- acorn-dynamic-import@2.0.1
15+
+-- ajv@4.11.3
16+
| +-- co@4.6.0
17+
| `-- json-stable-stringify@1.0.1
18+
| `-- jsonify@0.0.0
19+
+-- ajv-keywords@1.5.1
20+
+-- async@2.1.4
21+
| `-- lodash@4.17.4
22+
+-- enhanced-resolve@3.1.0
23+
| `-- object-assign@4.1.1
24+
+-- interpret@1.0.1
25+
+-- json-loader@0.5.4
26+
+-- loader-runner@2.3.0
27+
+-- memory-fs@0.4.1
28+
+-- node-libs-browser@2.0.0
29+
| +-- crypto-browserify@3.11.0
30+
| | +-- browserify-cipher@1.0.0
31+
| | | +-- browserify-aes@1.0.6
32+
| | | | `-- buffer-xor@1.0.3
33+
| | | +-- browserify-des@1.0.0
34+
| | | | `-- des.js@1.0.0
35+
| | | | `-- minimalistic-assert@1.0.0
36+
| | | `-- evp_bytestokey@1.0.0
37+
| | +-- browserify-sign@4.0.0
38+
| | | +-- bn.js@4.11.6
39+
| | | +-- browserify-rsa@4.0.1
40+
| | | +-- elliptic@6.3.3
41+
| | | | +-- brorand@1.0.7
42+
| | | | `-- hash.js@1.0.3
43+
| | | `-- parse-asn1@5.0.0
44+
| | | `-- asn1.js@4.9.1
45+
| | +-- create-ecdh@4.0.0
46+
| | +-- create-hash@1.1.2
47+
| | | +-- cipher-base@1.0.3
48+
| | | +-- ripemd160@1.0.1
49+
| | | `-- sha.js@2.4.8
50+
| | +-- create-hmac@1.1.4
51+
| | +-- diffie-hellman@5.0.2
52+
| | | `-- miller-rabin@4.0.0
53+
| | +-- pbkdf2@3.0.9
54+
| | +-- public-encrypt@4.0.0
55+
| | `-- randombytes@2.0.3
56+
| `-- stream-http@2.6.3
57+
| `-- builtin-status-codes@3.0.0
58+
+-- supports-color@3.2.3
59+
+-- tapable@0.2.6
60+
+-- uglify-js@2.7.5
61+
| `-- yargs@3.10.0
62+
| `-- cliui@2.1.0
63+
| `-- wordwrap@0.0.2
64+
+-- watchpack@1.2.1
65+
+-- webpack-sources@0.1.4
66+
| `-- source-list-map@0.1.8
67+
`-- yargs@6.6.0
68+
+-- camelcase@3.0.0
69+
+-- cliui@3.2.0
70+
| `-- wrap-ansi@2.1.0
71+
+-- get-caller-file@1.0.2
72+
+-- os-locale@1.4.0
73+
| `-- lcid@1.0.0
74+
| `-- invert-kv@1.0.0
75+
+-- read-pkg-up@1.0.1
76+
| +-- find-up@1.1.2
77+
| | +-- path-exists@2.1.0
78+
| | `-- pinkie-promise@2.0.1
79+
| | `-- pinkie@2.0.4
80+
| `-- read-pkg@1.1.0
81+
| +-- load-json-file@1.1.0
82+
| | +-- parse-json@2.2.0
83+
| | | `-- error-ex@1.3.0
84+
| | | `-- is-arrayish@0.2.1
85+
| | +-- pify@2.3.0
86+
| | `-- strip-bom@2.0.0
87+
| | `-- is-utf8@0.2.1
88+
| +-- normalize-package-data@2.3.5
89+
| | +-- hosted-git-info@2.2.0
90+
| | +-- is-builtin-module@1.0.0
91+
| | | `-- builtin-modules@1.1.1
92+
| | +-- semver@5.3.0
93+
| | `-- validate-npm-package-license@3.0.1
94+
| | +-- spdx-correct@1.0.2
95+
| | | `-- spdx-license-ids@1.2.2
96+
| | `-- spdx-expression-parse@1.0.4
97+
| `-- path-type@1.1.0
98+
+-- require-directory@2.1.1
99+
+-- require-main-filename@1.0.1
100+
+-- set-blocking@2.0.0
101+
+-- string-width@1.0.2
102+
| +-- code-point-at@1.1.0
103+
| +-- is-fullwidth-code-point@1.0.0
104+
| | `-- number-is-nan@1.0.1
105+
| `-- strip-ansi@3.0.1
106+
| `-- ansi-regex@2.1.1
107+
+-- which-module@1.0.0
108+
+-- y18n@3.2.1
109+
`-- yargs-parser@4.2.1
110+
`-- camelcase@3.0.0
111+

‎README.md

Copy file name to clipboard
+162Lines changed: 162 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
# vue-typescript-template-ui
2+
3+
一个非常简单的为[Vue2.0][1]和[TypeScript2.0][2]准备的项目开发环境，可以帮助你快速地开始一个项目的开发。
4+
5+
# 特性
6+
7+
- 引入了Vue 2.0全家桶的环境
8+
- 配置好了webpack
9+
- 配置好了一个UI库 - [element-ui][3]，让你开箱即用
10+
- 使用了 TypeScript2.0 以后的新特性`@types`
11+
- 由于Vue2.0采用ES6编写，类型声明中含有Typescript不支持的ES6特性，增加了 TypeScript2.0 对 [Promise][4] 等`es6`特性的支持
12+
- 引入lodash，快速开启FP
13+
14+
有个这些特性，无需在开发环境的搭建上煞费苦心，你可以轻松地将本项目作为你的脚手架代码进行项目开发。
15+
16+
# 快速上手
17+
18+
安装依赖
19+
```
20+
npm install
21+
```
22+
开发测试：
23+
```
24+
npm run dev
25+
```
26+
部署到生产环境：
27+
```
28+
npm run build
29+
```
30+
31+
# 主题
32+
33+
关于主题的配置可以参考 [custom-theme][5]
34+
35+
基本的配置过程如下：
36+
37+
- **安装element-theme**：
38+
```
39+
npm i element-theme -D
40+
```
41+
42+
- **安装element-theme-default**
43+
```
44+
npm i element-theme-default -D
45+
```
46+
47+
- **生成变量文件**
48+
49+
```
50+
node_modules/.bin/et -i
51+
```
52+
![image_1b92frkkv1g7h7fo1pd41kp31k55m.png-13.9kB][6]
53+
54+
运行成功后，在你的项目根目录下会生成一个基于CSS4.0编写的`element-variables.css`，打开文件，可以编写你的主题配色：
55+
56+
![image_1b92fv4b81jr56i5o5l4o0h4r1g.png-75.2kB][7]
57+
58+
59+
- **生成主题文件**
60+
在上一步编辑好 `element-variables.css` 后，执行此步骤:
61+
```
62+
node_modules/.bin/et
63+
```
64+
65+
![image_1b92fs857n5d9k2car8did0g13.png-15.2kB][8]
66+
67+
这里你也可以加上`-w`参数进行实时编译。
68+
69+
- **在项目中引入**
70+
71+
注意，只需要引入`index.css`
72+
```
73+
import './theme/index.css';
74+
```
75+
76+
接下来，你就可以使用自己的主题了。
77+
78+
# 库
79+
80+
name | version
81+
--- | ---
82+
typescript | 2.0.0+
83+
Vue | 2.0.0+
84+
Vue Router | 2.0.0+
85+
vue-resource | 0.9.3
86+
lodash | 4.0.0+
87+
element-ui | 1.0.0+
88+
89+
90+
# 使用Typescript开发Vue要注意的点
91+
92+
## Typescript2以前
93+
94+
声明文件（.d.ts文件）是在TypeScript中使用现有JavaScript库的一个基本组成部分。
95+
96+
所有的js库在引入ts时，都必须顺带地加入类型声明文件（d.ts）,早期，有一个非常出色的库——[DefinitelyTyped][9]，它拥有一些主流的js库的类型声明文件。此外，为了更便捷地进行安装，还有一个非常强大的ts类型声明管理库——[typings][10]，它允许你通过这样的方式进行安装一个库的类型声明文件：
97+
98+
首先全局安装typings：
99+
```
100+
npm install typings -g
101+
```
102+
推荐采用这种方式进行一个类型定义库的安装：
103+
```
104+
typings install dt~vue --global --save
105+
```
106+
然后，项目根目录下会出现typings目录，结构如下：
107+
![image_1b92hf66j18vo1ic71tcbcp1iac1t.png-8.5kB][11]
108+
109+
index.d.ts 的内容如下：参见ts的[三斜线指令][12]和[模块解析][13]
110+
```
111+
/// <reference path="globals/vue/index.d.ts" />
112+
```
113+
114+
如此一来，我们可以在当前项目目录的任意位置采用如下方式导入Vue:
115+
116+
```
117+
import * as Vue from 'vue';
118+
```
119+
120+
但凡是会引入ts的库，如vue全家桶，或者lodash，都必须通过上述方式获取dts类型声明文件。
121+
122+
但是，Typescript2开始有了一些变化，请看下文。
123+
124+
## Typescript2以后
125+
126+
参见微软的这篇博文：[The Future of Declaration Files][14]
127+
128+
总的意思就是，**在TypeScript 2.0中获取类型声明除了npm之外不需要任何工具。**
129+
130+
比如，想要引入lodash，只需要执行:
131+
```
132+
npm install --save @types/lodash
133+
```
134+
然后你就可以直接使用了：
135+
```
136+
import * as _ from "lodash";
137+
_.padStart("Hello TypeScript!", 20, " ");
138+
```
139+
140+
此外，目前在使用Typescript2 + Vue2遇到的问题，及其解决办法整理如下：
141+
142+
issue | solution
143+
--- | ---
144+
typescript编译表示不认识vue声明文件中的类型Promise | 安装es6-prommise `npm i @types/es6-promise -save`
145+
指令递归会报错，提示堆栈溢出 | 尚未解决
146+
147+
148+
149+
[1]: https://github.com/vuejs/vue
150+
[2]: https://github.com/Microsoft/TypeScript
151+
[3]: https://github.com/ElemeFE/element
152+
[4]: https://github.com/stefanpenner/es6-promise
153+
[5]: http://element.eleme.io/#/en-US/component/custom-theme
154+
[6]: http://static.zybuluo.com/a472590061/jg8g8a6392ppmohabnoh7qii/image_1b92frkkv1g7h7fo1pd41kp31k55m.png
155+
[7]: http://static.zybuluo.com/a472590061/6oweqbrqjvfm221l3b64ny81/image_1b92fv4b81jr56i5o5l4o0h4r1g.png
156+
[8]: http://static.zybuluo.com/a472590061/64vc46bkcp3yaayxf6oimqtw/image_1b92fs857n5d9k2car8did0g13.png
157+
[9]: https://github.com/DefinitelyTyped/DefinitelyTyped
158+
[10]: https://github.com/typings/typings
159+
[11]: http://static.zybuluo.com/a472590061/crvbo8k38quhhywmn1j8pcz9/image_1b92hf66j18vo1ic71tcbcp1iac1t.png
160+
[12]: https://www.tslang.cn/docs/handbook/triple-slash-directives.html
161+
[13]: https://www.tslang.cn/docs/handbook/module-resolution.html
162+
[14]: https://blogs.msdn.microsoft.com/typescript/2016/06/15/the-future-of-declaration-files/

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.