Vue：從單頁面到工程化項目

時間 2021-08-13

標籤 css html vue node git github web vue-router vuex chrome 欄目 CSS 简体版

原文原文鏈接

Vue
模板語法，條件渲染，列表渲染
vue-router vuex
vue-cli

用到的網站：
https://cn.vuejs.org/v2/guide/
https://cli.vuejs.org/zh/guide/
https://www.bootcdn.cn/css

開發環境

一、IDEhtml

webstorm http://www.jetbrains.com/webstorm
vscode https://code.visualstudio.com/

二、node環境vue

（1）nvm Node Version Manager
node 多版本管理工具node

[1] 安裝
https://github.com/nvm-sh/nvmgit

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

vim ~/.bash_profile
或者全局配置在這個目錄下
/etc/profile.dgithub

# nvm配置
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

[2]使用web

$ nvm --version  # 0.34.0
nvm --help
nvm ls
nvm ls-remote
nvm install 8.0.0
nvm deactivate  # 卸載時使用

$ node --version
v8.0.0

(2) cnpm淘寶鏡像
http://npm.taobao.org/vue-router

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

(3)chrome插件
vue.js devtoolsvuex

chrome vue插件下載地址
https://chrome-extension-downloader.com/chrome

(4)vue-cli

$ npm install -g @vue/cli   # 全局安裝
$ vue --version

環境檢查

$ nvm --version
0.34.0
$ node --version
v8.16.0
$ npm --version
5.0.0
$ vue --version
2.9.6
$ npm ls -g --depth=0

模板語法

一、文件結構
-template
-script
-css

二、插值語法，數據，js表達式
三、指令（指令縮寫） @click，v-if, :href

vueCDN: https://www.bootcdn.cn/

代碼示例

<html>
<head>
<!-- 能夠在head標籤中 經過CND引入-->
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>

<body>
<!-- 模板部分-->
<div id="app">
    <div>{{message}}</div>          <!--變量替換 hello world! -->
    <div>{{ count + 1 }}</div>      <!--數值運算 2 -->
    <div>{{template}}</div>         <!--原樣顯示 <div>hello div</div> -->
    <div v-html="template"></div>   <!--標籤解析 hello div -->
    
    <!--屬性綁定 3者等效-->
    <div><a href="https://www.baidu.com">百度</a></div>
    <div><a v-bind:href="url">百度</a></div>   
    <div><a :href="url">百度</a></div>

    <!--事件綁定 2者等效-->
    <div><button v-on:click="add()">count+1</button></div>
    <div><button @click="add()">count+1</button></div>
</div>

<!--js部分-->
<script> new Vue({ el: "#app", // 綁定的對象 // 數據 data: { message: "hello world!", count: 1, template: "<div>hello div</div>", url: "https://www.baidu.com" }, // 方法 methods: { add: function() { this.count += 1; } } }); </script>
</body>
</html>

計算屬性和偵聽屬性

軟回車（換行不刪除）：shift+enter

計算屬性  computed   數據聯動   監聽多個屬性 
偵聽器    watch      異步場景   監聽一個屬性

代碼示例

<div id="app">
    <div>{{message}}</div>
    <div>{{fullMessage }}</div>
</div>

<script> var app = new Vue({ el: "#app", data: { message: "hello" }, // 偵聽屬性 watch: { message: function(newVal, oldVal) { console.log(oldVal + " => " + newVal); } }, // 計算屬性 computed: { fullMessage: function(){ return `數據：${this.message}`; } } }); </script>

渲染

條件渲染: v-if, v-else, v-else-if; v-show
列表渲染: v-for
Class與Style綁定

代碼示例

<div id="app">
    <!-- if 條件判斷 -->
    <div v-if="count===0">
        count的值===0
    </div>
    <div v-else-if="count > 0">
        count的值 > 0
    </div>
    <div v-else>
        count的值 < 0
    </div>

    <!-- show 條件判斷 -->
    <div v-show="count==5">
        count的值 == 5
    </div>
    
    <!-- 循環渲染 -->
    <div v-for="item in students">
        {{item.name}} | {{item.age}}
    </div>

    <!-- 循環渲染和條件渲染結合 -->
    <div v-for="item in students">
        <div v-if="item.age > 23">
            {{item.name}}: age>23
        </div>
        <div v-else>
            {{item.name}}
        </div>
    </div>

    <!-- 樣式渲染 -->
    <div v-for="item in students">
        <div v-show="item.age > 23" :class="['red', 'gree', {'red': item.age<23}]" :style="itemStyle">
            {{item.name}}
        </div>
    </div>
</div>

<script> var app = new Vue({ el: "#app", data: { count: 0, students: [ { name: "小倉", age: 23 }, { name: "小龍", age: 24 } ], // style屬性 itemStyle: { color: "red" } } }); </script>

vue-cli

$ vue create hello-world  # 建立項目
$ npm run server          # 啓動項目

一、組件化思想
實現功能模塊複用
開發複雜應用

原則：
300行原則
複用原則
業務複雜性原則

二、風格指南
https://cn.vuejs.org/v2/style-guide/

三、Vue-router
配置router.js

四、Vuex
state 狀態
mutations 方法集
actions
vuex管理不一樣組件共用變量，一個組件改變變量，另外一個跟着改變。

store.js 定義全局數據和方法

export default new Vuex.Store({
  // 定義公共的數據
  state: {
    count: 0
  },

  // 公共的方法
  mutations: {
    increase() {
      this.state.count ++;
    }
  },
  actions: {

  },
});

info.vue 修改全局變量

<template>
  <div>
    info 
    <button @click="add()">加一</button>
  </div>
</template>

<script> // 導入文件 @至關於src目錄 import store from "@/store" export default{ name: "Info", store, // 整個生命週期綁定 mounted(){ window.app = this; }, methods: { add: function() { console.error("加一"); debugger; // 調用store中的increase方法 store.commit("increase"); }, output: function(){ console.log("out put"); } } } </script>

about.vue調用全局數據

<template>
  <div class="about">
    <h1>This is an about page</h1>
     <div>{{msg}}</div>
  </div>
</template>

<script> import store from "@/store" export default{ name: "About", store, data(){ return { msg: store.state.count } } } </script>

五、調試
console.log()
console.error()
alert() 阻塞
debugger 斷點
window對象綁定

六、集成vue

Git工做流

# 拉取倉庫
git clone git@hello.git
cd hello
git status
git branch -a   # 本地遠程分支
git branch

# 添加新文件
touch text.txt
git status
git add .
git commit -m "初次提交"
git remote -v   # origin 遠程倉庫
git push origin master  # 推送到遠程主幹分支

# 新需求分支
git checkout -b dev
touch test1.txt
git add test1.txt
git commit -m "dev功能開發"
git push origin dev  # 推送到dev分支

# 合併分支到master上
git checkout master
git merge dev
git push origin master  # 提交到遠程master分支
git branch -d dev       # 刪除本地dev分支
git push origin :dev    # 刪除遠程dev分支

# 回退版本
git reset --hard head^   # 回退到上一版本

git log
git reflog
git reset --hard HEAD@{1}

快速原型開發

npm install -g @vue/cli-service-global

vue serve demo.vue

demo.vue

<template>
    <div>
        <ul>
            <li v-for="(item, index) in list" :class="{'active': index===currentIndex}" :key="index" @click="selectItem(index)" >{{item}}</li>
        </ul>
        
        <button type="button" @click="add()">添加</button>

        <ul>
            <li v-for="(item, index) in target" :key="index" >{{item}}</li>
        </ul>
    </div>
</template>

<script> export default { name: "demo1", data() { return{ currentIndex: -1, list: [1, 2, 3, 4], target: [] } }, methods: { add(){ if (this.currentIndex < 0){ return } this.target.push(this.list[this.currentIndex]); this.currentIndex = -1; }, // 選中的時候 selectItem(index) { this.currentIndex = index; } } } </script>

<style> .active{ background-color: green; color: white } </style>