mirror of https://github.com/ElemeFE/element
add CDN tips
Leopoldthecoder
杨奕
parent
b53dcd1766
commit
9b6a21073b
|
|
@ -3,8 +3,12 @@
|
|||
### npm
|
||||
Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/).
|
||||
|
||||
:::tip
|
||||
Note that this doc is for 1.x, so you need the `legacy` tag when installing.
|
||||
:::
|
||||
|
||||
```shell
|
||||
npm i element-ui -S
|
||||
npm i element-ui@legacy -S
|
||||
```
|
||||
|
||||
### CDN
|
||||
|
|
@ -17,6 +21,10 @@ Get the latest version from [unpkg.com/element-ui](https://unpkg.com/element-ui@
|
|||
<script src="https://unpkg.com/element-ui@1.4/lib/index.js"></script>
|
||||
```
|
||||
|
||||
:::tip
|
||||
We recommend our users to lock Element's version when using CDN. For example, if you're using Element 1.4.8, you can lock CSS and JavaScript files like this: `https://unpkg.com/element-ui@1.4.8/lib/theme-default/index.css`, `https://unpkg.com/element-ui@1.4.8/lib/index.js`.
|
||||
:::
|
||||
|
||||
### Hello world
|
||||
If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/18/)
|
||||
|
||||
|
|
@ -37,7 +45,7 @@ If you are using CDN, a hello-world page is easy with Element. [Online Demo](htt
|
|||
</div>
|
||||
</body>
|
||||
<!-- import Vue before Element -->
|
||||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||
<script src="https://unpkg.com/vue@2.5/dist/vue.js"></script>
|
||||
<!-- import JavaScript -->
|
||||
<script src="https://unpkg.com/element-ui@1.4/lib/index.js"></script>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ This part walks you through the process of using Element in a webpack project.
|
|||
|
||||
### Use Starter Kit
|
||||
|
||||
We provide a general [project template](https://github.com/ElementUI/element-starter) for you. For those who are familiar with [cooking](https://github.com/ElementUI/element-cooking-starter) or [Laravel](https://github.com/ElementUI/element-in-laravel-starter), we also provide corresponding templates, and you can download and use them as well.
|
||||
We provide a general [project template](https://github.com/ElementUI/element-starter/tree/1.x) for you. For those who are familiar with [cooking](https://github.com/ElementUI/element-cooking-starter) or [Laravel](https://github.com/ElementUI/element-in-laravel-starter/tree/1.x), we also provide corresponding templates, and you can download and use them as well.
|
||||
|
||||
If you prefer not to use them, please read the following.
|
||||
|
||||
|
|
@ -42,8 +42,8 @@ Typical configurations for these config files are:
|
|||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
|
||||
},
|
||||
"dependencies": {
|
||||
"element-ui": "^1.0.0",
|
||||
"vue": "^2.1.6"
|
||||
"element-ui": "^1.4.0",
|
||||
"vue": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.0.0",
|
||||
|
|
|
|||
|
|
@ -3,8 +3,12 @@
|
|||
### npm 安装
|
||||
推荐使用 npm 的方式安装，它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。
|
||||
|
||||
:::tip
|
||||
注意：这里是 1.x 的文档，因此使用 npm 安装时需要添加 `legacy` 标签。
|
||||
:::
|
||||
|
||||
```shell
|
||||
npm i element-ui -S
|
||||
npm i element-ui@legacy -S
|
||||
```
|
||||
|
||||
### CDN
|
||||
|
|
@ -17,6 +21,10 @@ npm i element-ui -S
|
|||
<script src="https://unpkg.com/element-ui@1.4/lib/index.js"></script>
|
||||
```
|
||||
|
||||
:::tip
|
||||
我们建议使用 CDN 引入 Element 的用户在链接地址上锁定版本，以免将来 Element 升级时受到非兼容性更新的影响。例如，如需锁定版本为 1.4.8，则 CSS 和 JavaScript 文件的地址分别是 `https://unpkg.com/element-ui@1.4.8/lib/theme-default/index.css` 和 `https://unpkg.com/element-ui@1.4.8/lib/index.js`。
|
||||
:::
|
||||
|
||||
### Hello world
|
||||
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://jsfiddle.net/hzfpyvg6/18/)
|
||||
|
||||
|
|
@ -37,7 +45,7 @@ npm i element-ui -S
|
|||
</div>
|
||||
</body>
|
||||
<!-- 先引入 Vue -->
|
||||
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||
<script src="https://unpkg.com/vue@2.5/dist/vue.js"></script>
|
||||
<!-- 引入组件库 -->
|
||||
<script src="https://unpkg.com/element-ui@1.4/lib/index.js"></script>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
### 使用 Starter Kit
|
||||
|
||||
我们提供了通用的[项目模板](https://github.com/ElementUI/element-starter)，你可以直接使用。对于熟悉 [cooking](https://github.com/ElementUI/element-cooking-starter) 或 [Laravel](https://github.com/ElementUI/element-in-laravel-starter) 的用户，我们也准备了相应的模板，同样可以直接下载使用。
|
||||
我们提供了通用的[项目模板](https://github.com/ElementUI/element-starter/tree/1.x)，你可以直接使用。对于熟悉 [cooking](https://github.com/ElementUI/element-cooking-starter) 或 [Laravel](https://github.com/ElementUI/element-in-laravel-starter/tree/1.x) 的用户，我们也准备了相应的模板，同样可以直接下载使用。
|
||||
|
||||
如果不希望使用我们提供的模板，请继续阅读。
|
||||
|
||||
|
|
@ -42,8 +42,8 @@
|
|||
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
|
||||
},
|
||||
"dependencies": {
|
||||
"element-ui": "^1.0.0",
|
||||
"vue": "^2.1.6"
|
||||
"element-ui": "^1.4.0",
|
||||
"vue": "^2.3.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.0.0",
|
||||
|
|
|
|||
Loading…
Reference in New Issue