Vue安裝

六、Vue-CLI 項目搭建

1、環境搭建

• 安裝node

官網下載安裝包，傻瓜式安裝：https://nodejs.org/zh-cn/

• 安裝cnpm

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

• 安裝腳手架

cnpm install -g @vue/cli

• 清空緩存處理

npm cache clean --force

2、項目的創建

• 創建項目

vue creat 項目名
// 要提前進入目標目錄(項目應該創建在哪個目錄下)
// 選擇自定義方式創建項目，選取Router, Vuex插件

• 啟動/停止項目

npm run serve / ctrl+c
// 要提前進入項目根目錄

• 打包項目

npm run build
// 要在項目根目錄下進行打包操作

3、認識項目

• 項目目錄

dist: 打包的項目目錄(打包后會生成)
node_modules: 項目依賴
public: 共用資源
src: 項目目標,書寫代碼的地方
	-- assets:資源
	-- components:組件
	-- views:視圖組件
	-- App.vue:根組件
	-- main.js: 入口js
	-- router.js: 路由文件
	-- store.js: 狀態庫文件
vue.config.js: 項目配置文件(沒有可以自己新建)

• 配置文件：vue.config.js

module.exports={
	devServer: {
		port: 8888
	}
}
// 修改端口,選做

• main.js

new Vue({
	el: "#app",
	router: router,
	store: store,
	render: function (h) {
		return h(App)
	}
})

• .vue文件

<template>
    <!-- 模板區域 -->
</template>
<script>
    // 邏輯代碼區域
    // 該語法和script綁定出現
    export default {
        
    }
</script>
<style scoped>
    /* 樣式區域 */
    /* scoped表示這里的樣式只適用於組件內部, scoped與style綁定出現 */
</style>

4、項目功能

• vue-router

{
    path: '/',
    name: 'home',
    // 路由的重定向
    redirect: '/home'
}

{
    // 一級路由, 在根組件中被渲染, 替換根組件的<router-view/>標簽
    path: '/one-view',
    name: 'one',
    component: () => import('./views/OneView.vue')
}

{
    // 多級路由, 在根組件中被渲染, 替換根組件的<router-view/>標簽
    path: '/one-view/one-detail',
    component: () => import('./views/OneDetail.vue'),
    // 子路由, 在所屬路由指向的組件中被渲染, 替換該組件(OneDetail)的<router-view/>標簽
    children: [{
        path: 'show',
        component: () => import('./components/OneShow.vue')
    }]
}

<!-- router-link渲染為a標簽 -->
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link :to="{name: 'one'}">One</router-link> |

<!-- 為路由渲染的組件占位 -->
<router-view />

a.router-link-exact-active {
    color: #42b983;
}

// router的邏輯轉跳
this.$router.push('/one-view')

// router采用history方式訪問上一級
this.$router.go(-1)

• vuex

// 在任何一個組件中,均可以通過this.$store.state.msg訪問msg的數據
// state永遠只能擁有一種狀態值
state: {
    msg: "狀態管理器"
},
// 讓state擁有多個狀態值
mutations: {
    // 在一個一個組件中,均可以通過this.$store.commit('setMsg', new_msg)來修改state中的msg
    setMsg(state, new_msg) {
        state.msg = new_msg
    }
},
// 讓mutations擁有多個狀態值
actions: {

}

• vue-cookie

// 安裝cookie的命令
// npm install vue-cookie --save
// 為項目配置全局vue-cookie
import VueCookie from 'vue-cookie'
// 將插件設置給Vue原型,作為全局的屬性,在任何地方都可以通過this.$cookie進行訪問
Vue.prototype.$cookie = VueCookie

// 持久化存儲val的值到cookie中
this.$cookie.set('val', this.val)
// 獲取cookie中val字段值
this.$cookie.get('val')

• axios

// 安裝 axios(ajax)的命令
// npm install axios--save
// 為項目配置全局axios
import Axios from 'axios'
Vue.prototype.$ajax = Axios

let _this = this
this.$ajax({
    method: 'post',
    url: 'http://127.0.0.1:5000/loginAction',
    params: {
        usr: this.usr,
        ps: this.ps
    }
}).then(function(res) {
    // this代表的是回調then這個方法的調用者(axios插件),也就是發生了this的重指向
    // 要更新頁面的title變量,title屬於vue實例
    // res為回調的對象,該對象的data屬性就是后台返回的數據
    _this.title = res.data
}).catch(function(err) {
    window.console.log(err)
})

# 用pycharm啟動該文件模擬后台
from flask import Flask, request, render_template
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)

@app.route('/')
def index():
    return "<h1>主頁</h1>"

@app.route('/loginAction', methods=['GET', 'POST'])
def test_action():
    # print(request.args)
    # print(request.form)
    # print(request.values)
    usr = request.args['usr']
    ps = request.args['ps']
    if usr != 'abc' or ps != '123':
        return 'login failed'
    return 'login success'


if __name__ == '__main__':
    app.run()