# 操作步骤
# 1. 文件夹重命名
复制 demo 文件夹,重命名该文件夹名称。命名规范如下，例如开发一款智能灯插件，智能灯品类码为 0x13, 那么文件夹名称推荐改为 T0x13
# 2. 关联入口文件
entry 文件夹为 webpack 打包编译的入口文件，views 目录下的文件或者文件夹必须和 entry 下的 js 文件保持一一对应关系，而且 js 内的路径必须和实际保持一致，才能正常启动新的插件项目。 entry 目录下的原 weex.js 的内容应该修改如下： 将插件目录名称从 demo 改为 T0x13
import App from '@/widgets/T0x13/views/weex.vue'
import dolphinweex from '@/js/dolphinweex.js'
import ExceptionReport from '@/js/exceptionReport.js'
Vue.use(dolphinweex)
//错误捕捉，异常上报
Vue.use(ExceptionReport)
1
2
3
4
5
6
7
2
3
4
5
6
7
entry 目录下的原 welcome.js 的内容应该修改如下： 将插件目录名称从 demo 改为 T0x13
import App from '@/widgets/T0x13/views/welcome'
import dolphinweex from '@/js/dolphinweex.js'
import ExceptionReport from '@/js/exceptionReport.js'
Vue.use(dolphinweex)
//错误捕捉，异常上报
Vue.use(ExceptionReport)
1
2
3
4
5
6
7
2
3
4
5
6
7
TIP
tips: views 目录下的页面文件要和 entry 下文件一一对应
# 3. 创建新的页面
例如创建商城页面（shop）
- 在 entry 目录下新建
shop.js。
import App from '@/widgets/T0x13/views/shop'
import dolphinweex from '@/js/dolphinweex.js'
import ExceptionReport from '@/js/exceptionReport.js'
Vue.use(dolphinweex)
//错误捕捉，异常上报
Vue.use(ExceptionReport)
1
2
3
4
5
6
7
2
3
4
5
6
7
- 在 views 目录下新建 shop 文件夹，内部新建文件
index.js和index.vueindex.js 内容如下：
export { default } from './index.vue'
1
index.vue 内容如下：
<template>
<div class="wrapper">
<text>{{title}}</text>
</div>
</template>
<script>
export default {
name: 'helloWorld',
data () {
return {
title: 'hello, world'
}
},
methods: {}
}
</script>
<style scoped></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 4. 切换启动插件项目
如果要切换打包编译当前工程内的插件项目，打开根目录下的 package.json 文件，CATE_NAME后面跟随的是插件项目的名称。
如示例中插件名称的默认值是 demo，内容如下：
"scripts": {
"start": "npm run clean:all && npm run serve",
"serve": "cross-env CATE_NAME=demo webpack-dev-server --env.NODE_ENV=development --progress",
"dev": "cross-env CATE_NAME=demo webpack --env.NODE_ENV=common --progress --watch",
"build": "cross-env CATE_NAME=demo webpack --env.NODE_ENV=common",
"build:prod": "npm run clean:all && cross-env CATE_NAME=demo webpack --env.NODE_ENV=production && node configs/publish.js",
"build:prod:web": "cross-env CATE_NAME=demo webpack --env.NODE_ENV=release",
"clean:all": "rimraf ./.temp && rimraf ./dist && rimraf ./release && rimraf ./publish && rimraf ./publish.zip",
"lint": "eslint --ext .js,.vue src",
"lint:fix": "eslint --ext .js,.vue src --fix . && echo 'Lint complete.'"
},
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
将其中的CATE_NAME=后面的值改为新创建插件项目的名称，如将demo改为T0x13,效果如下：
"scripts": {
"start": "npm run clean:all && npm run serve",
"serve": "cross-env CATE_NAME=T0x13 webpack-dev-server --env.NODE_ENV=development --progress",
"dev": "cross-env CATE_NAME=T0x13 webpack --env.NODE_ENV=common --progress --watch",
"build": "cross-env CATE_NAME=T0x13 webpack --env.NODE_ENV=common",
"build:prod": "npm run clean:all && cross-env CATE_NAME=T0x13 webpack --env.NODE_ENV=production && node configs/publish.js",
"build:prod:web": "cross-env CATE_NAME=T0x13 webpack --env.NODE_ENV=release",
"clean:all": "rimraf ./.temp && rimraf ./dist && rimraf ./release && rimraf ./publish && rimraf ./publish.zip",
"lint": "eslint --ext .js,.vue src",
"lint:fix": "eslint --ext .js,.vue src --fix . && echo 'Lint complete.'"
},
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
然后，执行 npm start 新创建的插件项目就可以成功运行了。