vue 封装组件 vue.js

一、下载脚手架 npm install -g @vue/cli
检查是否安装正确
vue --version

文章图片

二、创建项目 vue create project0
三、启动项目

$ cd project0 $ npm run serve

四、安装 sass-loader

npm i sass-loader -D （-D是指是开发依赖，不会在生产包里）

五、安装 node-sass

npm i node-sass -D

六、改变项目结构 1、路径：project0\vue.config.js

module.exports = {pages: { index: { entry: 'examples/main.js', template: 'public/index.html', filename: 'index.html' } },}

【vue 封装组件】2、

文章图片

七、封装 1、组件模板（路径：project0\components\lib\card\src\main.vue）

2、导出组件（路径：project0\components\lib\card\index.js）

import mCard from './src/main.vue' mCard.install = function(Vue){ Vue.component(mCard.name,mCard) } export default mCard

3、注册组件（路径：project0\examples\main.js）

import '../components/css/demo.scss' import mCard from '../components/lib/card/index' Vue.use(mCard);

4、引用组件（路径：project0\examples\App.vue）

5、结果：

文章图片

八、webpack 打包js为umd模块

vue 封装组件