提交 8530ba9b 编写于 作者: D dolymood

update(doc): format quick-start

上级 013cdf65
......@@ -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
......
......@@ -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.
先完成此消息的编辑!
想要评论请 注册