Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DiDi
cube-ui
提交
8530ba9b
C
cube-ui
项目概览
DiDi
/
cube-ui
大约 1 年 前同步成功
通知
34
Star
9078
Fork
1508
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
C
cube-ui
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
8530ba9b
编写于
11月 15, 2017
作者:
D
dolymood
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
update(doc): format quick-start
上级
013cdf65
变更
2
隐藏空白更改
内联
并排
Showing
2 changed file
with
189 addition
and
190 deletion
+189
-190
document/components/docs/en-US/quick-start.md
document/components/docs/en-US/quick-start.md
+97
-97
document/components/docs/zh-CN/quick-start.md
document/components/docs/zh-CN/quick-start.md
+92
-93
未找到文件。
document/components/docs/en-US/quick-start.md
浏览文件 @
8530ba9b
...
...
@@ -8,7 +8,7 @@ If you are going to create a new project with cube-ui, use the [cli tools](https
$
vue init cube-ui/cube-template projectname
```
If you are going to use cube-ui in an existing project, see the Install part first.
If you are going to use cube-ui in an existing project, see the Install part first.
### Install
...
...
@@ -21,122 +21,122 @@ Since cube-ui support two compile ways such as [post-compile] (#/en-US/docs/post
-
post-compile
1.
Modify package.json and install the dependencies
```
json
{
//
webpack-post-compile-plugin
depends
on
compileDependencies
"compileDependencies"
:
[
"cube-ui"
],
"devDependencies"
:
{
"babel-plugin-transform-modules"
:
"^0.1.0"
,
//
add
stylus
dependencies
"stylus"
:
"^0.54.5"
,
"stylus-loader"
:
"^2.1.1"
,
"webpack-post-compile-plugin"
:
"^0.1.2"
1.
Modify package.json and install the dependencies
```json
{
// webpack-post-compile-plugin depends on compileDependencies
"compileDependencies": ["cube-ui"],
"devDependencies": {
"babel-plugin-transform-modules": "^0.1.0",
// add stylus dependencies
"stylus": "^0.54.5",
"stylus-loader": "^2.1.1",
"webpack-post-compile-plugin": "^0.1.2"
}
}
}
```
```
2.
Modify .babelrc, use
[
babel-plugin-transform-modules
](
https://www.npmjs.com/package/babel-plugin-transform-modules
)
:
2.
Modify .babelrc, use
[
babel-plugin-transform-modules
](
https://www.npmjs.com/package/babel-plugin-transform-modules
)
:
```
json
{
"plugins"
:
[
"transform-modules"
,
{
"cube-ui"
:
{
//
Notice:
this
path
should
be
changed
to
`src/modules`
"transform"
:
"cube-ui/src/modules/${member}"
,
"kebabCase"
:
true
}
}]
}
```
```json
{
"plugins": ["transform-modules", {
"cube-ui": {
// Notice: this path should be changed to `src/modules`
"transform": "cube-ui/src/modules/${member}",
"kebabCase": true
}
}]
}
```
3.
Modify webpack.base.conf.js
3.
Modify webpack.base.conf.js
```
js
var
PostCompilePlugin
=
require
(
'
webpack-post-compile-plugin
'
)
module
.
exports
=
{
// ...
plugins
:
[
```js
var PostCompilePlugin = require('webpack-post-compile-plugin')
module.exports = {
// ...
new
PostCompilePlugin
()
]
// ...
}
```
plugins: [
// ...
new PostCompilePlugin()
]
// ...
}
```
4.
Modify
`exports.cssLoaders`
function in build/utils.js
4.
Modify
`exports.cssLoaders`
function in build/utils.js
```
js
exports
.
cssLoaders
=
function
(
options
)
{
// ...
const
stylusOptions
=
{
'
resolve url
'
:
true
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return
{
css
:
generateLoaders
(),
postcss
:
generateLoaders
(),
less
:
generateLoaders
(
'
less
'
),
sass
:
generateLoaders
(
'
sass
'
,
{
indentedSyntax
:
true
}),
scss
:
generateLoaders
(
'
sass
'
),
stylus
:
generateLoaders
(
'
stylus
'
,
stylusOptions
),
styl
:
generateLoaders
(
'
stylus
'
,
stylusOptions
)
```js
exports.cssLoaders = function (options) {
// ...
const stylusOptions = {
'resolve url': true
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus', stylusOptions),
styl: generateLoaders('stylus', stylusOptions)
}
}
}
```
```
See
[
https://github.com/vuejs-templates/webpack/pull/970/files
](
https://github.com/vuejs-templates/webpack/pull/970/files
)
-
normal compile
See [https://github.com/vuejs-templates/webpack/pull/970/files](https://github.com/vuejs-templates/webpack/pull/970/files)
1.
Modify package.json and install the dependencies
-
Normal compile
```
json
{
"devDependencies"
:
{
"babel-plugin-transform-modules"
:
"^0.1.0"
1.
Modify package.json and install the dependencies
```json
{
"devDependencies": {
"babel-plugin-transform-modules": "^0.1.0"
}
}
}
```
2.
Modify .babelrc
```
json
{
"plugins"
:
[
[
"transform-modules"
,
{
"cube-ui"
:
{
"transform"
:
"cube-ui/lib/${member}"
,
"kebabCase"
:
true
,
"style"
:
{
"ignore"
:
[
"create-api"
,
"better-scroll"
]
```
2.
Modify .babelrc
```json
{
"plugins": [
["transform-modules", {
"cube-ui":
{
"transform": "cube-ui/lib/${member}",
"kebabCase": true
,
"style": {
"ignore": ["create-api", "better-scroll"]
}
}
}
}]
]
}
```
3.
Modify webpack config
```
js
// webpack.config.js
module
.
exports
=
{
// ...
resolve
:
{
}]
]
}
```
3.
Modify webpack config
```js
// webpack.config.js
module.exports = {
// ...
alias
:
{
resolve
: {
// ...
'
cube-ui
'
:
'
cube-ui/lib
'
alias: {
// ...
'cube-ui': 'cube-ui/lib'
// ...
}
// ...
}
// ...
}
// ...
}
```
```
#### CDN
...
...
document/components/docs/zh-CN/quick-start.md
浏览文件 @
8530ba9b
...
...
@@ -21,124 +21,123 @@ $ npm install cube-ui --save
cube-ui 搭配 webpack 2+ 支持
[
后编译
](
#/zh-CN/docs/post-compile
)
和普通编译 2 种构建方式(默认使用后编译),使用前都需要修改应用的依赖和配置。
-
后编译
1.
修改 package.json 并安装依赖
```json
{
// webpack-post-compile-plugin 依赖 compileDependencies
"compileDependencies": ["cube-ui"],
"devDependencies": {
"babel-plugin-transform-modules": "^0.1.0",
// 新增 stylus 相关依赖
"stylus": "^0.54.5",
"stylus-loader": "^2.1.1",
"webpack-post-compile-plugin": "^0.1.2"
}
}
```
2.
修改 .babelrc,依赖
[
babel-plugin-transform-modules
](
https://www.npmjs.com/package/babel-plugin-transform-modules
)
:
```json
{
"plugins": [
["transform-modules", {
"cube-ui": {
// 注意: 这里的路径需要修改到 src/modules 下
"transform": "cube-ui/src/modules/${member}",
"kebabCase": true
}
}]
]
}
```
1.
修改 package.json 并安装依赖
3.
修改 webpack.base.conf.js
```
json
{
//
webpack-post-compile-plugin
依赖
compileDependencies
"compileDependencies"
:
[
"cube-ui"
],
"devDependencies"
:
{
"babel-plugin-transform-modules"
:
"^0.1.0"
,
//
新增
stylus
相关依赖
"stylus"
:
"^0.54.5"
,
"stylus-loader"
:
"^2.1.1"
,
"webpack-post-compile-plugin"
:
"^0.1.2"
```js
var PostCompilePlugin = require('webpack-post-compile-plugin')
module.exports = {
// ...
plugins: [
// ...
new PostCompilePlugin()
]
// ...
}
}
```
```
4.
修改 build/utils.js 中的
`exports.cssLoaders`
函数
```js
exports.cssLoaders = function (options) {
// ...
const stylusOptions = {
'resolve url': true
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus', stylusOptions),
styl: generateLoaders('stylus', stylusOptions)
}
}
```
2.
修改 .babelrc,依赖
[
babel-plugin-transform-modules
](
https://www.npmjs.com/package/babel-plugin-transform-modules
)
:
具体参见 [https://github.com/vuejs-templates/webpack/pull/970/files](https://github.com/vuejs-templates/webpack/pull/970/files)
-
普通编译
1.
修改 package.json 并安装依赖
```
json
{
"devDependencies"
:
{
"babel-plugin-transform-modules"
:
"^0.1.0"
}
}
```
2.
修改 .babelrc
```
json
{
"plugins"
:
[
[
"transform-modules"
,
{
"cube-ui"
:
{
//
注意:
这里的路径需要修改到
src/modules
下
"transform"
:
"cube-ui/src/modules/${member}"
,
"kebabCase"
:
true
"transform"
:
"cube-ui/lib/${member}"
,
"kebabCase"
:
true
,
"style"
:
{
"ignore"
:
[
"create-api"
,
"better-scroll"
]
}
}
}]
]
}
```
3.
修改 webpack.base.conf.js
3.
修改 webpack 配置:
```
js
var
PostCompilePlugin
=
require
(
'
webpack-post-compile-plugin
'
)
// webpack.config.js
module
.
exports
=
{
// ...
plugins
:
[
resolve
:
{
// ...
new
PostCompilePlugin
()
]
// ...
}
```
4.
修改 build/utils.js 中的
`exports.cssLoaders`
函数
```
js
exports
.
cssLoaders
=
function
(
options
)
{
// ...
const
stylusOptions
=
{
'
resolve url
'
:
true
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return
{
css
:
generateLoaders
(),
postcss
:
generateLoaders
(),
less
:
generateLoaders
(
'
less
'
),
sass
:
generateLoaders
(
'
sass
'
,
{
indentedSyntax
:
true
}),
scss
:
generateLoaders
(
'
sass
'
),
stylus
:
generateLoaders
(
'
stylus
'
,
stylusOptions
),
styl
:
generateLoaders
(
'
stylus
'
,
stylusOptions
)
}
}
```
具体参见
[
https://github.com/vuejs-templates/webpack/pull/970/files
](
https://github.com/vuejs-templates/webpack/pull/970/files
)
-
普通编译
1.
修改 package.json 并安装依赖
```
json
{
"devDependencies"
:
{
"babel-plugin-transform-modules"
:
"^0.1.0"
}
}
```
2.
修改 .babelrc
```
json
{
"plugins"
:
[
[
"transform-modules"
,
{
"cube-ui"
:
{
"transform"
:
"cube-ui/lib/${member}"
,
"kebabCase"
:
true
,
"style"
:
{
"ignore"
:
[
"create-api"
,
"better-scroll"
]
}
alias
:
{
// ...
'
cube-ui
'
:
'
cube-ui/lib
'
// ...
}
}]
]
}
```
3.
修改 webpack 配置:
```
js
// webpack.config.js
module
.
exports
=
{
// ...
resolve
:
{
// ...
alias
:
{
// ...
'
cube-ui
'
:
'
cube-ui/lib
'
// ...
}
// ...
}
// ...
}
```
```
#### CDN
...
...
@@ -234,4 +233,4 @@ import { createAPI, BetterScroll } from 'cube-ui'
}
}
</script>
```
\ No newline at end of file
```
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录