Vue的模块化开发
如果我们打开之前使用的人人开源的Vue前端项目会发现整个项目只有一个html页面，
并且配置有大量的Vue文件，
这就是Vue模块化的结果。
开始Vue的模块化开发
首先安装组件
首先打开终端全局安装Webpack：
C:\Users\yhm>npm install webpack -g
之后全局安装Vue脚手架：
C:\Users\yhm>npm install -g @vue/cli-init
显示页面
C:\Users\yhm>npm install webpack -g
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
C:\Users\yhm\AppData\Roaming\npm\webpack -> C:\Users\yhm\AppData\Roaming\npm\node_modules\webpack\bin\webpack.js
npm WARN notsup Unsupported engine for watchpack-chokidar2@2.0.0: wanted: {"node":"<8.10.0"} (current: {"node":"12.17.0","npm":"6.14.4"})
npm WARN notsup Not compatible with your version of node/npm: watchpack-chokidar2@2.0.0
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\webpack\node_modules\watchpack-chokidar2\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.3 (node_modules\webpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
+ webpack@4.43.0
added 343 packages from 200 contributors in 69.728s
C:\Users\yhm>npm install -g @vue/cli-init
npm WARN deprecated vue-cli@2.9.6: This package has been deprecated in favour of @vue/cli
npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)
+ @vue/cli-init@4.4.1
added 253 packages from 207 contributors in 54.083s
表示我们安装完成。
初始化Vue项目
之后我们创建一个新文件夹，vue-mode，在文件夹内部打开终端，输入指令
vue init webpack vue-demo
然后系统会询问你一些配置信息，我的选择如下：
C:\Users\yhm\Desktop\vue-mode>vue init webpack vue-demo
? Project name vue-demo
? Project description vue-demo
? Author lastingwar <403627000@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "vue-demo".
初始化完成之后，我们会看到在我们创建的文件夹内部有了一个新的文件夹，使用终端进入到文件内部，输入指令 nmp run dev 就会看到vue运行起来了：
DONE Compiled successfully in 3046ms 11:48:54 ├F10: AM┤
I Your application is running here: http://localhost:8080
此时我们访问http://localhost:8080/就能看到如下界面。
vue模块化内容介绍
之后我们在vscode中打开初始化的文件夹开始进行开发。
我们看到初始化的文件夹中有非常多的内容，首先
根目录下的文件，包括一些版本控制的文件和主页的html文件。
build文件夹下是构建初始化项目的一些组件。
config文件夹是js格式的配置文件。
node_modules是依赖的文件。
src是主程序文件夹。
static用来放静态文件。
接下来我们可以自己写一个vue的组件，内容如下：
<template>
<div>
<h1>你好，Hello，{{name}}</h1>
<el-radio v-model="radio" label="1">备选项1</el-radio>
<el-radio v-model="radio" label="2">备选项2</el-radio>
</div>
</template>
<script>
export default {
data() {
return {
name: "张三",
radio: "2"
};
}
};
</script>
<style >
</style>
之后在router目录下的index.js文件中添加路由规则：
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/hello',
name: "Hello",
component: Hello
}
]
})
保存之后运行npm run dev 就能够访问http://localhost:8080/#/hello页面看到我们自己写的vue组件。
tips我们还可以整合一下elementUI来帮助我们进行快速开发
终端输入：npm i element-ui完成之后，在main.js文件中添加导入的代码即可使用：
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router: router,
components: { App:App },
template: '<App/>'
})
之后在官方文档中查去相关组件的代码，直接拷贝即可。我们可以拷贝一个布局容器来替换我们原先的模块。
打开App.vue文件，内容如下：
<template>
<el-container style="height: 500px; border: 1px solid #eee">
<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>导航二</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="2-1">选项1</el-menu-item>
<el-menu-item index="2-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="2-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="2-4">
<template slot="title">选项4</template>
<el-menu-item index="2-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
<el-submenu index="3">
<template slot="title"><i class="el-icon-setting"></i>导航三</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="3-1">选项1</el-menu-item>
<el-menu-item index="3-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="3-4">
<template slot="title">选项4</template>
<el-menu-item index="3-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</el-aside>
<el-container>
<el-header style="text-align: right; font-size: 12px">
<el-dropdown>
<i class="el-icon-setting" style="margin-right: 15px"></i>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>查看</el-dropdown-item>
<el-dropdown-item>新增</el-dropdown-item>
<el-dropdown-item>删除</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<span>王小虎</span>
</el-header>
<el-main>
<el-table :data="tableData">
<el-table-column prop="date" label="日期" width="140">
</el-table-column>
<el-table-column prop="name" label="姓名" width="120">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</el-main>
</el-container>
</el-container>
</template>
<script>
export default {
data() {
const item = {
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄"
};
return {
tableData: Array(20).fill(item)
};
}
};
</script>
<style>
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
之后访问http://localhost:8080/#/hello即可以看到我们从elementUI中拷贝过来的页面模块了：
添加vue代码片段
每一次创建vue文件，都要手动生成标签号，太麻烦了，可以在VScode中添加vue代码片段，这样每次输入快捷键就能快速生成vue代码片段。来到文件->首选项->用户片段页面：输入vue作为代码片段的名称，之后删除原有的内容，改为：
{
"生成vue模板": {
"prefix": "vue",
"body": [
"<!-- $1 -->",
"<template>",
"<div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
"//例如：import 《组件名称》 from '《组件路径》';",
"",
"export default {",
"//import引入的组件需要注入到对象中才能使用",
"components: {},",
"data() {",
"//这里存放数据",
"return {",
"",
"};",
"},",
"//监听属性 类似于data概念",
"computed: {},",
"//监控data中的数据变化",
"watch: {},",
"//方法集合",
"methods: {",
"",
"},",
"//生命周期 - 创建完成（可以访问当前this实例）",
"created() {",
"",
"},",
"//生命周期 - 挂载完成（可以访问DOM元素）",
"mounted() {",
"",
"},",
"beforeCreate() {}, //生命周期 - 创建之前",
"beforeMount() {}, //生命周期 - 挂载之前",
"beforeUpdate() {}, //生命周期 - 更新之前",
"updated() {}, //生命周期 - 更新之后",
"beforeDestroy() {}, //生命周期 - 销毁之前",
"destroyed() {}, //生命周期 - 销毁完成",
"activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
"}",
"</script>",
"<style scoped>",
"$4",
"</style>"
],
"description": "生成vue模板"
}
}
保存之后，我们新建一个vue文件，输入vue指令，就会出现使用代码片段的提示，就能快速生成我们需要的vue代码模块了。
805
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
