vue 封装组件

一、下载脚手架

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'
      }
    },
    
}

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模块