Vue项目创建与应用

Vue-CLI项目搭建

Vue项目需要自建服务器：node

"""
1.用C++语言编写，用来运行JavaScript语言
2.node可以为前端项目提供server (包含了socket)
"""

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. 项目的创建

• 创建项目

"""起步
1.cd 到目标目录
2.创建项目：vue create 目录名
"""


""" 创建项目的过程
提示下载原：选择淘宝镜像

具体配置：上下键切换，空格键选择，回车键进入下一步
1.第二个选项进入自定义配置
2.Babel jsES6语法转换ES5，Router路由 Vuex组件数据交互 Formatter格式化代码
3...有提示选择大写，没提示默认第一个即可
"""

• 启动/停止项目

""" 终端启动
1.进入项目：cd到项目目录
2.启动/停止项目：npm run serve / ctrl+c
"""

""" pycharm配置
1.按照vue.js插件，重启
2.配置项目的npm启动项
"""

• 打包项目

npm run build
// 要在项目根目录下进行打包操作

3、认识项目

• 项目目录

"""
node_modules：依赖
public：共有资源
	ico：页面标签的logo
	html：单页面 - 整个项目的唯一页面
src：代码主体
...：项目、插件等相关配置
"""

""" src
assets：静态资源
components：小组件
views：视图组件
App.vue：根组件
main.js：主脚本文件
router.js：路由脚本文件 vue-router
store.js：仓库脚本文件 vuex
"""

• 配置文件：vue.config.js

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

• main.js

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

• 组件

<template>
    <!-- 模板区域 -->
    <!-- 只能有一个根标签 -->
</template>

<script>
    // 逻辑代码区域
    // 该语法和script绑定出现
    export default {
        name: "Main",
        data: function() {
            return {
                
            }
        },
        ...
    }
</script>

<style scoped>
    /* 样式区域 */
    /* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
</style>

• 在根组件中渲染页面组件

<!-- Main.vue 主页组件 -->
<template>
    <div class="main">
        <h1>{{ title }}</h1>
    </div>
</template>

<script>
    export default {
        name: "Main",
        data: function () {
            return {
                title: '主页'
            }
        }
    }
</script>

<style scoped>
    .main {
        height: 100vh;
        background-color: orange;
    }
    h1 {
        margin: 0;
        color: red;
    }
</style>

<!-- App.vue根组件 -->
<template>
    <div id="app">
        <!-- 3.使用 -->
        <Main></Main>
    </div>
</template>
<script>
    // 1.导入
    import Main from '@/views/Main'
    export default {
        // 2.注册
        components: {
            Main: Main
        }
    }
</script>
<style>
    html, body {
        margin: 0;
    }
</style>

项目功能

• 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()