文章目录

1：什么是模块化？2： Vue模块化环境搭建2.1 第一步：npm install webpack -g2.2 第二步：npm install -g @vue/cli-init2.3 第三步：初始化vue项目2.4 第四步：启动vue项目 3：初始化vue项目的目录详解和运行流程3.1 代码演示 4：整合ElementUI快速开发

1：什么是模块化？

模块化是一种处理复杂系统分解为更好的可管理模块的方式。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。模块化就是把代码进行拆分，方便重复利用。

类似java中的导包:要使用一一个包，必须先导包。而JS中没有包的概念，换来的是模块。 模块功能主要由两个命令构成: ‘export’ 和import’。

'export’命令用于规定模块的对外接口。

'import’命令用于导入其他模块提供的功能。

2： Vue模块化环境搭建

前端模块化开发中webpack、npm、node、nodejs之间的关系[小白总结] 我们在使用vue的时候大多都是使用它的模块化环境（我们在码云上拉取的后台管理系统的前端界面就是用模块化的开发环境搭建的），那我们要怎么开发呢？看如下步骤 一个前提：我们要安装好node.js 2020Nodejs安装图文教程

2.1 第一步：npm install webpack -g

全局安装webpack（webpack作用：可以将项目进行打包）

2.2 第二步：npm install -g @vue/cli-init

//命令行程序 @vue/cli-init

全局安装vue脚手架

2.3 第三步：初始化vue项目

vue init webpack appname

vue 脚手架使用webpack模板初始化一个 appname项目

2.4 第四步：启动vue项目

项目的package.json中有scripts, 代表我们能运行的命令

npm start // 启动项目 npm run dev//启动项目

3：初始化vue项目的目录详解和运行流程

对初始化项目的目录讲解 对main.js文件讲解

主程序，先创建了一个vue实例，实例就来挂载index.html的页面元素 < div id=“app”>< /div >接下来我们使用了vue的router（简写形式：主键名和变量名一样就可以简写）实际上是router: router（从import router from './router’这里来 ./是同级目录）我们又导入了一个App组件，元素最终怎么渲染呢，我们最后使用了template，这个模板相当于使用了App组件vue的路由使用的是import router from './router’这个路径下的router文件，就可以和App.vue中的如下配置 搭配使用 <router-link to="/hello">去hello</router-link> <router-view/> /* eslint-disable no-new */ //主程序，先创建了一个vue实例，实例就来挂载index.html的页面元素 <div id="app"></div> //接下来我们使用了vue的router（简写形式：主键名和变量名一样就可以简写）实际上是router: router（从import router from './router'这里来 ./是同级目录） //我们又导入了一个App组件，元素最终怎么渲染呢，我们最后使用了template，这个模板相当于使用了App组件 new Vue({ el: '#app', router, components: { App }, template: '<App/>' })

3.1 代码演示

我们把用脚手架进行开发用到的项目列出来，如下 main.js

new Vue({ el: '#app', router, components: { App }, template: '<App/>' })

App.vue

<template> <div id="app"> <img src="./assets/logo.png"> <!-- //路径变了只有我们的路由视图这一块变化--> <router-link to="/hello">去hello</router-link> <router-view/> </div> </template> <script> //...

index.js

import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' import Hello from "../components/Hello"; // 我们要使用路由的功能必须要导入import Vue from 'vue' // import Router from 'vue-router' // Vue.use(Router) Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/hello', name: 'Hello', component: Hello } ] })

HelloWorld.vue

<template> <div class="hello"> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <ul> <li> <a href="https://vuejs.org" target="_blank" > Core Docs </a> </li> <li> <a href="https://forum.vuejs.org" target="_blank" > Forum </a> </li> <li> <a href="https://chat.vuejs.org" target="_blank" > Community Chat </a> </li> <li> <a href="https://twitter.com/vuejs" target="_blank" > Twitter </a> </li> <br> <li> <a href="http://vuejs-templates.github.io/webpack/" target="_blank" > Docs for This Template </a> </li> </ul> <h2>Ecosystem</h2> <ul> <li> <a href="http://router.vuejs.org/" target="_blank" > vue-router </a> </li> <li> <a href="http://vuex.vuejs.org/" target="_blank" > vuex </a> </li> <li> <a href="http://vue-loader.vuejs.org/" target="_blank" > vue-loader </a> </li> <li> <a href="https://github.com/vuejs/awesome-vue" target="_blank" > awesome-vue </a> </li> </ul> </div> </template> //..

Hello.vue

<template> <h1>你好啊，Vue</h1> </template> //....

如上代码的运行机制我们已经讲结过了，我们执行如下命令就可以成功

$ npm run dev

4：整合ElementUI快速开发

接下来我们使用vue来整合ElementUI（用的非常多的vue组件库） Elimentui 我们要想使用ElementUI必须要在项目中执行如下命令，进行安装ElementUI

& npm i element-ui

你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。

完整引入 在 main.js 中写入以下内容： //.. import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); //...

演示1：完成如下效果 App.vue

<template> <div id="app"> <img src="./assets/logo.png"> <!-- //路径变了只有我们的路由视图这一块变化--> <router-link to="/hello">去elimentui组件示例 </router-link> <router-link to="/">去HelloWorld </router-link> <router-view/> </div> </template>

如上的两个路径会跳转到index.js界面中然后在到相应的组件界面中展示（这里面我们可以写自己喜欢的elimentui代码，比如我的Hello.vue写出来的效果如下） index.js

//..... export default new Router({ routes: [ { path: '/', name: 'HelloWorld', component: HelloWorld }, { path: '/hello', name: 'Hello', component: Hello } ] })

我们可以对上面的Hello.vue进行修改就可以变成如下效果