一、环境搭建

二、项目创建

三、认识项目

四、项目功能

一、环境搭建

*安装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

二、项目创建

*创建项目

vue create 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目,选取Router, Vuex插件

*启动/停止项目

npm run serve / ctrl+c
// 要提前进入项目根目录

*打包项目

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

三、认识项目

*项目目录

dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖
public: 共用资源
src: 项目目标,书写代码的地方
-- assets:资源
-- components:组件
-- views:视图组件
-- App.vue:根组件
-- main.js: 入口js
-- router.js: 路由文件
-- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)

*配置文件:vue.confih.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>

四、项目功能

*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 != '':
return 'login failed'
return 'login success' if __name__ == '__main__':
app.run()

Vue介绍:vue项目搭建的更多相关文章

  1. vuejs学习——vue+vuex+vue-router项目搭建(三)

    前言 vuejs学习——vue+vuex+vue-router项目搭建(一) vuejs学习——vue+vuex+vue-router项目搭建(二) 为什么用vuex:组件之间的作用域独立,而组件之间 ...

  2. vuejs学习——vue+vuex+vue-router项目搭建(二)

    前言 最近比较忙,所有第二章发布晚了,不好意思各位. vuejs学习——vue+vuex+vue-router项目搭建(一) 中我们搭建好了vue项目,我相信大家已经体验了vue其中的奥妙了,接下来我 ...

  3. vuejs学习——vue+vuex+vue-router项目搭建(一)

    前言 快年底了却有新公司邀请了我,所以打算把上家公司的学到一下技术做一些总结和分享. 现在vuejs都2.0了,我相信也有很多朋友和我一样实际项目还是选择vue1.0的或者给新手一些参考,不管在选择哪 ...

  4. vue多页面项目搭建(vue-cli 4.0)

    1.创建vue项目 cmd命令执行 vue create app (app 自定义的项目名) 一般都会选择后者,自己配置一下自己需要的选项(空格为选中) 这是我个人需要的一些选项,路由Router.状 ...

  5. VUE+Ionic,项目搭建&打包成APK

    安装Vue&创建Vue工程 1.安装Vue CLI: npm install -g vue-cli 2.创建新的Vue项目,创建最后一步会提醒是否使用npm install 自动安装,如果选择 ...

  6. Vue -cli 入门 --项目搭建(一)

    一. 安装node.js环境. 在node.js官网下载稳定版本(https://nodejs.org/en/) 下载完成后点击安装,安装过程很简单,一直next即可,安装完成会自动添加node及np ...

  7. vue全家桶项目搭建(vue-cli 2.9.6+vue-router+vuex+axios)

    一.安装vue-cli + vue-router + vuex + axios 1.安装vue-cli 2.创建项目 3.安装vuex和axios 二.搭建项目目录结构,如下所示: 1.assets目 ...

  8. Vue nodejs商城项目-搭建express框架环境

    1.express-project 搭建express框架环境 安装express generator生成器 通过生成器自动创建项目 配置分析 安装 cnpm i -g express-generat ...

  9. vue 3.0 项目搭建移动端 (七) 安装Vant

    # 通过 npm 安装 npm i vant -S 安装完配置 babel.config.js module.exports = { presets: ['@vue/app'], plugins: [ ...

  10. SpringBoot+SpringCloud+vue+Element开发项目——搭建开发环境

    1.新建一个项目

随机推荐

  1. golang的下载与安装

    golang的官网可能由于政策原因登陆不上. 所以可以到Go语言中文网下载:https://studygolang.com/dl 我下载的是go1.10.3.windows-amd64.msi安装包, ...

  2. linux基本防护措施,权限分配和提高防护安全

    设置用户失效 1.失效的用户将无法登录 使用chage命令将用户zhangsan的账户设为当前已失效(比如已经过去的某个时间): [root@proxy ~]# useradd zhangsan [r ...

  3. 什么是sigmoid激活函数?

    上面我们讲了引入激活函数的意义,激活函数有多种,下面我们拿一种激活函数sigmoid来做示例,其他的类似.sigmoid函数表达式如下: ​ 它的函数曲线图是: ​ 看到上面的函数曲线图,可以看出是一 ...

  4. apue-ubuntu环境搭建

    目录 apue环境搭建 title: apue环境搭建 date: 2019/11/19 19:25:18 toc: true --- apue环境搭建 下载编译 wget http://www.ap ...

  5. jdbc配置及使用测试

    源码:https://github.com/xiaostudy/jdbc_test1 这是没有使用连接池的 目录 创建的sql语句create.sql DROP TABLE IF EXISTS t_u ...

  6. 学习笔记:CentOS7学习之二十二: 结构化命令case和for、while循环

    目录 学习笔记:CentOS7学习之二十二: 结构化命令case和for.while循环 22.1 流程控制语句:case 22.2 循环语句 22.1.2 for-do-done 22.3 whil ...

  7. 《MIT 6.828 Lab 1 Exercise 10》实验报告

    本实验的网站链接:MIT 6.828 Lab 1 Exercise 10. 题目 Exercise 10. To become familiar with the C calling conventi ...

  8. [LuoguP1074]靶形数独_搜索

    靶形数独 题目链接:https://www.luogu.org/problem/P1074 数据范围:略. 题解: 传说中的大爆搜题啊. 我觉得这种题就是你能想到什么优化就直接上什么优化.... 这个 ...

  9. SQL 十位随机数(大小写字母+数据)

    USE [TEST]GO/****** Object: UserDefinedFunction [dbo].[RANDTENNUMS] Script Date: 2019/7/23 15:40:16 ...

  10. web项目获取资源文件

    首页 博客 学院 CSDN学院 下载 论坛 APP CSDN 问答 商城 活动 VIP会员 专题 招聘 ITeye GitChat GitChat 图文课 写博客 消息 1 评论 关注 点赞 回答 系 ...