十七、模块化开发

模块化开发

.vue的文件在sublime编辑器下默认是不被识别的，要想识别，我们就必须安装必要的插件。并且，要想高亮显示就必须安装：插件 Vue Syntax Hightlight
其次：选中Pachage Control:Install Package,直接回车
最后：在第二步回车之后，会出现以下的这个图片。在输入框中输入 Vue 然后直接选中Vue Syntax Highlight 选中某个插件可以使用键盘的：上下键
最后的最后，再次打开对应的vue文件，发现已经高亮语法显示。

首先：打开你的sublime，然后打开 PackageControl 如下图,快捷键 Ctrl+Shift+P。
命令： vue init webpack-simple vue-cli-demo
cd vue-cli-demo
cnpm install
npm run dev

1.vue-router模块化

   cnpm install vue-router -S

1.1.编辑main.js

1.2.编辑App.vue

1.3.创建router.config.js

2.axios模块化

   cnpm install axios -S
   使用axios的两种方式
    方式1：在每一个组件中去引入axios
    方式2：在main.js中全局引入并添加到Vue的原型中

3.自定义一个组件，添加事件

二、Elment UI PC端 Mint UI (移动端)

地址：http://element-cn.eleme.io/

2.快速上手

  安装element ui
  cnpm install element-ui -S

在mian.js中使用组件

    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css';
    把所有的文件都引入

2.3在webpack.config.js中添加loader

CSS样式和字体库图标都需要相应的loader来加载，所以需要style-loader、css-loader
安装 cnpm install style-loader --save -dev

2.4使用组件

2.5使用less

  安装loader，需要两个 less,less-loader
    cnpm install less less-loader -D

在webpack.config.js 配置loader