Vue和Element的使用

1.vue 脚手架创建步骤

1. 创建一个文件夹 vue
2. 双击进入文件夹,在路径上输入cmd
3. 输入vue ui, 目的:调出图形化用户界面
4. 点击创建
5. 
6. 
7. 
8. 

9.

10.在vscode中打开

• 主要目录介绍

• src目录介绍

• vue项目启动

1. 图形化界面中没有npm脚本的显示方法[VScode侧边栏左下角，没有NPM脚本，如何打开？？？ - 疯狂代码! - 博客园]

2. 更改端口

   

2.vue项目开发流程

• 标准模块

3.vue路由

• 1.vue路由介绍

• 2.配置:在src - router - index.js中配置

• 3.在具体页面添加router-link

 <el-menu-item index="1-1"><router-link to="/dept">部门管理</router-link></el-menu-item><el-menu-item index="1-2"><router-link to="/emp">员工管理</router-link></el-menu-item>

• 4.在App.vue中配置router-view

//1.视图部分
<template><div><!-- //展示数据 --><!--<h1> {{message}}</h1>--><!--默认都是根组件,所以要修改为自己所需内容的展示 --><!-- <element-view></element-view> --><!--员工管理--><!-- <emp-view></emp-view> --><router-view></router-view></div>
</template>
//2.vue中的数据模型和方法
<script>
// import EmpView from "./views/tlias/EmpView.vue";// import ElementView from "./views/element/ElementView.vue";
// import ElementView from "./views/element/ElementView.vue";
export default {components: {/*EmpView*/},data() {return {message: "hello vue", //声明一个数据模型};},methods: {},
};
</script>
//3.css的样式
<style>
</style>

• 5.vue项目打包:点击build 后,文件会打包在dist文件下

• 6.将打包后的文件部署到Nginx服务器
  • 将打包好的dist的中的文件,部署到Nginx中是html目录(将里面的内容删掉)下
    • 方法:在dist文件下,复制所有内容 到html目录下
  • Nginx介绍
  • 官网:https://nginx.org/en/
  • 下载稳定版本
  • 目录介绍
    • 
• 7.Nginx启动:点击nginx.exe
  
  • 注意:容易启动不了,因为端口被占用
  • 方法:在cmd中使用 netstat -ano | findStr 80 查找端口号,找到进程id,在任务管理器中确认进程,为系统进程,不能终止,所以要更换Nginx端口号
  • 
• • Nginx端口号更换
    • 在==nginx-1.28.0\nginx-1.28.0\conf\nginx.conf ==该路径下,打开文件,找到36行:listen 80;修改为listen 90;
    • 在任务管理器搜索nginx确定有该进程
    • 通过浏览器访问:localhost:90

4.Element

• 基本组件应用

<template><div><!--button按钮--><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row><br /><!--table表格 //ctrl alt l 格式化--><el-table :data="tableData" border style="width: 100%"><el-table-column prop="date" label="日期" width="180"> </el-table-column><el-table-column prop="name" label="姓名" width="180"> </el-table-column><el-table-column prop="address" label="地址"> </el-table-column></el-table><!--分页组件 Pagination--><el-paginationbackgroundlayout="sizes,prev, pager, next,jumper,total"@size-change="handleSizeChange"@current-change="handleCurrentChange":total="1000"><!--seizes 显示的条数 ,prev 小于号是否展示上一页, pager 每一页的页码, next 大于号下一页的按钮是否展示,jumper 前往的页数 ,total 是否要展示总共的记录数 ; 每个的位置可调整--></el-pagination><!--Dialog对话框--><!-- Table --><el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button><el-dialog title="收货地址" :visible.sync="dialogTableVisible">//对话框是展示和隐藏<el-table :data="gridData"><el-table-columnproperty="date"label="日期"width="150"></el-table-column><el-table-columnproperty="name"label="姓名"width="200"></el-table-column><el-table-column property="address" label="地址"></el-table-column></el-table></el-dialog><br /><!--Dialog对话框展示,form表单组件--><el-button type="text" @click="dialogFormVisible = true">打开嵌套form的 Dialog</el-button><el-dialog title="form表单" :visible.sync="dialogFormVisible"><!--对话框是展示和隐藏--><el-form :model="form"><el-form-item label="活动名称" :label-width="formLabelWidth"><el-input v-model="form.name" autocomplete="off"></el-input></el-form-item><el-form-item label="活动区域" :label-width="formLabelWidth"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="onsubmit">确 定</el-button></div></el-dialog><!----><!----><!----></div>
</template><script>
export default {data() {return {form: {name: "",region: "",date1: "",date2: "",delivery: false,type: [],resource: "",desc: "",},gridData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},],dialogTableVisible: false,dialogFormVisible: false,tableData: [{date: "2016-05-02",name: "王小虎",address: "上海市普陀区金沙江路 1518 弄",},{date: "2016-05-04",name: "王小虎",address: "上海市普陀区金沙江路 1517 弄",},{date: "2016-05-01",name: "王小虎",address: "上海市普陀区金沙江路 1519 弄",},{date: "2016-05-03",name: "王小虎",address: "上海市普陀区金沙江路 1516 弄",},],};},methods: {handleSizeChange: function (val) {alert("每页记录数变化" + val);},handleCurrentChange: function (val) {alert("页码变化: " + val);},onsubmit: function () {alert(JSON.stringify(this.form));},},
};
</script><style>
</style>

• 案例