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>

• 案例