使用Vue脚手架进行模块化开发
初次学习，只是当做开发流程的笔记，若有错误，请各位大佬斧正，多谢！
1.全局安装webpack
打开cmd命令行窗口，输入npm install webpack，如果报错建议安装淘宝镜像之后使用cnpm install webpack
2.安装vue脚手架
cnpm install -g @vue/cli-init
3.初始化vue项目
vue init webpack appname：vue脚手架使用webpack模板初始化一个appname项目
在桌面新建一个文件夹vue-demo,在目录输入cmd进入后台，此时再vue-demo目录下，输入vue init webpack vue-demo
ps:此时如果报错，说什么npm的问题，应该是镜像的问题，重新设置下镜像
把vue-demo中的文件夹删除，重新来一遍即可
4.之后就是下载依赖完成，初始化完成，在localhost：8080试一下
5.这样就代表脚手架工程搭建完毕了，然后在vscode打开vue-demo这个文件夹，在控制台终端输入npm run dev
访问8080，还是和上面一样的界面
下面测试一下vue中跳转界面的定义
和java一样，都是在src目录中进行代码编写，新建一个Hello.vue文件，如图的代码，h1标签中的{{name}}就是下方函数中return的值，之后保存
<template>
<div>
<h1>你好，hello，{{name}}</h1>
</div>
</template>
<script>
export default {
data(){
return{
name: "张三"
}
}
}
</script>
<style>
</style>
在index.js中就是我们刚开始运行项目跳转到的首页，我们也新写一个测试一下，path是我们限制好的uri中的路径，即8080/#/hello,name是上面import导入的刚才新建的Hello.vue组件名字，component就是导入的组件
保存，ctrl+鼠标左键访问，这样就能按照自己写的路径访问到自己写的组件内容
结合Element.UI
首先安装组件，使用npm
在vscode终端输入npm i element-ui安装
安装完成之后，进入官方文档https://element.eleme.cn/#/zh-CN/component/quickstart，在main.js文件中引入elementUI,输入下面框中内容
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,
components: { App },
template: '<App/>'
})
写个小用例测试一下功能，在官方文档中radio的介绍
在之前的hello文件中测试一下单选框，标签中写了两个单选框，下面js中代表默认选中radio：2，label就是单选框的值value
保存，npm run dev 测试一下
————————————————————————————
，下面使用element做一个稍微复杂的页面，在官方文档中有写好的布局，可以直接引用
找到这个实例，显示代码，将其css代码复制
<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>
在main.js中设置的是首页展示app这个组件的内容
那就将app.vue文件中的app组件内容替换掉，要保留template根标签，每一个element组件都要用根标签包围
然后将数据复制过来
export default {
data() {
const item = {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
};
return {
tableData: Array(20).fill(item)
}
}
};
替换
样式style也复制过来，替换，保存
<style>
.el-header {
background-color: #B3C0D1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
</style>
效果如下：
想实现的功能是，当点击选项1的时候才会展示有房的数据，点击选项2又会展示其他的数据
代码中，选项1和选项2都在分组1下，先改个名字，用户列表和hello
这一个.vue文件中展示的是一个页面的视图，是对数据的跳转，想点击不同选项展示不同的页面要把每一页的数据抽取出来，当点击的时候跳转到设定好的页面，只不过是右面局部的跳转
把之前右方展示的列表抽取出来，需要用到路由视图，当路径改变，页面也会跟着动态变化，然后把注释的部分单独抽取出来写成一个页面，当点击之前的选项1的时候，按照写好的路径跳转到这个页面
在componet目录下新建一个vue组件，MyTable.vue，vue组件三要素，template、script、style每编写一个组件都要写这些，可以搞一个模板自动生成这些基本的样式代码
点击vscode文件–首选项–用户片段，输入vue，会有以下页面
全部注释，复制下方样例模板，保存，以后再创建新的vue组件，直接输入vue就可以快捷创建模板
{
"生成vue模板": {
"prefix": "vue",
"body": [
"<template>",
"<div></div>",
"</template>",
"",
"<script>",
"//这里可以导入其他文件（比如，组件，工具js；第三方插件js，json文件，图片文件等等）",
"//例如：import 《组件名称》 from '《组件路径》';",
"",
"export default {",
"//import引入的组件需要注入到对象中才能使用",
"components: {},",
"props: {},",
"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模板"
}
}
在新建的MyTable.vue文件中输入vue，回车
将之前App.vue中注释的那部分代码复制过来，这些事之前element官方文档中的模板首页展示的一个样例列表，我们想把这个列表做成在右边点击左侧的导航栏再单独展示的样式，就把这个单独提取出来，放在
<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>
</div>
还有这个列表中的数据也复制过来，粘贴到
data() {
const item = {
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
};
return {
tableData: Array(20).fill(item),
};
},
我们使用的是路由视图转发，所以要把这个组件做成一个路径转发的形式，当点击左侧的导航栏，跳转到设置好的页面
然后在首页的代码，添加router属性，设为true，就会进行路由跳转
把
<el-menu-item index="/table">用户列表</el-menu-item>
<el-menu-item index="/hello">hello</el-menu-item>
改为index.js文件中的path值，保存，浏览器查看
898
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
