六、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文件

4、项目功能

• vue-router

{    path: '/',    name: 'home',    // 路由的重定向    redirect: '/home'}{    // 一级路由, 在根组件中被渲染, 替换根组件的
    标签    path: '/one-view',    name: 'one',    component: () => import('./views/OneView.vue')}{    // 多级路由, 在根组件中被渲染, 替换根组件的
    标签    path: '/one-view/one-detail',    component: () => import('./views/OneDetail.vue'),    // 子路由, 在所属路由指向的组件中被渲染, 替换该组件(OneDetail)的
    标签    children: [{        path: 'show',        component: () => import('./components/OneShow.vue')    }]}

    
    
     Home
     |
    
     About
     |
    
     One
     |
    
    

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-cookieimport 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// 为项目配置全局axiosimport Axios from 'axios'Vue.prototype.$ajax = Axios

let _this = thisthis.$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_templatefrom flask_cors import CORSapp = Flask(__name__)CORS(app, supports_credentials=True)@app.route('/')def index():    return "
主页
"@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()