add CDN tips

pull/7927/head
Leopoldthecoder 2017-10-30 18:14:27 +08:00 committed by 杨奕
parent b53dcd1766
commit 9b6a21073b
4 changed files with 26 additions and 10 deletions

View File

@ -3,8 +3,12 @@
### npm ### npm
Installing with npm is recommended and it works seamlessly with [webpack](https://webpack.js.org/). 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 ```shell
npm i element-ui -S npm i element-ui@legacy -S
``` ```
### CDN ### 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> <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 ### Hello world
If you are using CDN, a hello-world page is easy with Element. [Online Demo](https://jsfiddle.net/hzfpyvg6/18/) 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> </div>
</body> </body>
<!-- import Vue before Element --> <!-- 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 --> <!-- import JavaScript -->
<script src="https://unpkg.com/element-ui@1.4/lib/index.js"></script> <script src="https://unpkg.com/element-ui@1.4/lib/index.js"></script>
<script> <script>

View File

@ -4,7 +4,7 @@ This part walks you through the process of using Element in a webpack project.
### Use Starter Kit ### 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. 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" "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}, },
"dependencies": { "dependencies": {
"element-ui": "^1.0.0", "element-ui": "^1.4.0",
"vue": "^2.1.6" "vue": "^2.3.0"
}, },
"devDependencies": { "devDependencies": {
"babel-core": "^6.0.0", "babel-core": "^6.0.0",

View File

@ -3,8 +3,12 @@
### npm 安装 ### npm 安装
推荐使用 npm 的方式安装,它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。 推荐使用 npm 的方式安装,它能更好地和 [webpack](https://webpack.js.org/) 打包工具配合使用。
:::tip
注意:这里是 1.x 的文档,因此使用 npm 安装时需要添加 `legacy` 标签。
:::
```shell ```shell
npm i element-ui -S npm i element-ui@legacy -S
``` ```
### CDN ### CDN
@ -17,6 +21,10 @@ npm i element-ui -S
<script src="https://unpkg.com/element-ui@1.4/lib/index.js"></script> <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 ### Hello world
通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://jsfiddle.net/hzfpyvg6/18/) 通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。[在线演示](https://jsfiddle.net/hzfpyvg6/18/)
@ -37,7 +45,7 @@ npm i element-ui -S
</div> </div>
</body> </body>
<!-- 先引入 Vue --> <!-- 先引入 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 src="https://unpkg.com/element-ui@1.4/lib/index.js"></script>
<script> <script>

View File

@ -4,7 +4,7 @@
### 使用 Starter Kit ### 使用 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" "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}, },
"dependencies": { "dependencies": {
"element-ui": "^1.0.0", "element-ui": "^1.4.0",
"vue": "^2.1.6" "vue": "^2.3.0"
}, },
"devDependencies": { "devDependencies": {
"babel-core": "^6.0.0", "babel-core": "^6.0.0",