Commit 9b6a2107 authored by Leopoldthecoder's avatar Leopoldthecoder Committed by 杨奕

add CDN tips

parent b53dcd17
...@@ -3,8 +3,12 @@ ...@@ -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@ ...@@ -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 ...@@ -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>
......
...@@ -4,7 +4,7 @@ This part walks you through the process of using Element in a webpack project. ...@@ -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: ...@@ -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",
......
...@@ -3,8 +3,12 @@ ...@@ -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 ...@@ -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 ...@@ -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>
......
...@@ -4,7 +4,7 @@ ...@@ -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 @@ ...@@ -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",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment