Vue学习笔记(五)

1.Vue模块化开发所谓模块化开发是指将不同的部分封装成不同的模块，而不是把所有的组件、路由等都写在一个页面里。每个模块各司其职，提高开发效率。在使用vue-cli生成的项目目录中，我们主要关注src目录。1、main.js文件main.js是整个项目的入口文件。vue-cli自动生成的文件内容如下：importVuefrom'vue'importAppfrom'./App'importrouterfrom'./router'Vue.config.productionTip=false//生产环境提示，这里设置为false，不提示/*eslint-disableno-new*/newVue({el:'#app',router,template:'',components:{App}})这里引入路由和App组件，并挂载到根组件。2.App.vue这个就是我们之前提到的单页面组件。我们可以在style上加上上面的属性，scoped表示该style只在当前组件有效，这在模块化开发和不会干扰其他组件的样式。3.router/index.js这个是项目的路由文件，存放了项目中所有的路由。importVuefrom'vue'importRouterfrom'vue-router'importHellofrom'@/components/Hello'Vue.use(Router)exportdefaultnewRouter({routes:[{path:'/',name:'Hello',component:Hello}]})这个和我们之前学的没什么区别，但是涉及到很多ES6的知识。2.axios模块化官方推荐的axios没有vue-router成熟，目前无法通过Vue.use()方法全局使用。解决方法有两种：在每个组件中引入axiosimportaxiosform'axios'，在main.js中全局引入axios并添加到Vue原型中Vue.prototype.axios=axiosthis.axios.get()//每个组件中引入axiosaxios。get(url).then(res=>{console.log(res);}).catch(err=>{console.log(err);})//在main.js中全局引入axios，并添加到Vue原型this.axios.get(url).then(res=>{console.log(res);}).catch(err=>{console.log(err);})3.ElmentUI1。ElementUI是饿了么团队开源的一个基于Vue2.0的组件库，可以快速搭建网站，提高开发效率。2.快速启动安装在main.js中引入webpack//1中添加loader。安装elmentuicnpminstallelement-ui-S//2。引入importElementUIfrom'element-ui'import'elementinmain.js-ui/lib/theme-default/index.css'//3。在webpack.base.conf.js中配置loaderCSS样式和字体图标需要通过对应的loader加载，所以需要style-loader和css-loader，file-loader需要安装usingless：具体使用less和less-loader在文档中有介绍，这里不再赘述。4.自定义全局组件（插件）全局组件（插件）：就是说可以在main.js中使用Vue.use()全局引入，然后在其他组件中使用，比如vue-路由器。步骤：1.创建组件（插件）2.编写index.js3.在main.js中引入4.在组件中使用//1.创建组件（插件）用户//2。编写index.js文件importuserfrom'./user'exportdefault{install:function(Vue){Vue.component('User',user);}}//3。在main.js中引入importUserfrom'./components/user'Vue。使用（用户）；//4。在组件中使用