vue中快速原型开发组件
VueCLi中提供了一个插件可以进行原型快速开发
需要先额外安装一个全局的扩展
npm install -g @vue/cli-service-global
要安装 @vue/cli-service-global 4.5.19,你需要满足以下要求:
安装要求
需要 Node.js 10.x 或以上版本。
使用 npm 6.x 或以上版本。
@vue/cli 的版本:@vue/cli-service-global 的版本通常与 @vue/cli 的版本对应。
使用 vue serve 快速查看组件的运行效果!
vue serve
vue serve 如果不指定参数默认会在当前目录找以下的入口文件main.is、index.js、App.vue、 app.vue
可以指定要加载的组件 vue serve ./src/login.vue
全局安装的依赖必备
添加elementUI
npm init -y
vue add element
在添加main.js引入vue和element-ui
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './src/App.vue'
Vue.use(ElementUI)
new Vue({
el:'#app',
render:h=>h(App)
})
Monorepo
管理多个相关项目将项目都放到packages文件夹下
目录结构如下图所示
在index.js中导出组件
plop基于模板生成结构
项目根目录 的package.json添加如下代码 npm i
时node_modules安装到根目录下,
npm i workspaces +文件名
指定安装到文件夹下
{
"private":true,
"workspaces":[
"packages/*"
],
}
storybook可视化组件展览平台
Lerna的安装
Lerna的使用
1.全局安装 yarn global add lerna
2.初始化 lerna init
3.发布 lerna publish
每次git提交之后才可以进行发布,发布首先应该进行构建,构建完成更改package.json中的模块的主入口文件
package.json中的main字段定了一个模块的主入口文件,这是 CommonJS 规范中的一个字段。当其他模块导入该模块时,Node.js 或者类似的 CommonJS 环境会默认加载这个文件。"module" 字段指定了一个模块的 ES Module 入口文件