Vue 02-脚手架开发流程记录

项目安装启动

npm install -g vue
npm install -g vue-cli
vue init webpack my-vue：创建一个vue2.0脚手架
npm install：进入项目目录执行此命令，安装package.json里面记录的依赖
npm run dev：启动项目

vuc-cli2脚手架项目结构

build：webpack配置
config：vue-cli配置
dist：webpack打包后的输出目录
node_modules：npm安装的node模块
src：vue项目程序
src/assets：静态资源，会经过编译/压缩，然后放到dist/static目录里
src/components：vue组件
src/router/index.js：组件路由配置，配置页面跳转
App.vue：vue组件的根组件，配置了 <router-view/>，所有组件在这个文件里进行页面跳转。
main.js：项目的入口文件，导入组件，关联App.vue到index.html里id为app这个div
static：这个文件夹里的静态资源不会被编译/压缩，会被直接复制到dist/static
.babelrc：es6语法转成es5语法，已对浏览器进行兼容
index.html：所有组件打包后，插入到这个文件内
package.json：node的配置文件

编码之前的配置

可选的，手动安装axios模块：npm install -S axios

main.js 添加如下内容

import axios from "axios";

// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
// 设置反向代理，前端请求默认发送到后台接口 http://localhost:8443/api
axios.defaults.baseURL = 'http://localhost:8443/api'

components 目录下创建Login.vue登陆组件

<template>
  <div>
      用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
      <br><br>
      密码： <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
      <br><br>
      <button v-on:click="login">登录</button>
  </div>
</template>

<script>

  export default {
    name: 'Login',
    data () {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        responseResult: []
      }
    },
    methods: {
      login() {
        this.$axios.post("/login", {
          username: this.loginForm.username,
          password: this.loginForm.password
        }).then(res => {
            if (res.data.code === 200) {
              this.$router.replace({path: '/index'})
            }
          }
        ).catch(error => {
          console.log(error)
        })
      }
    }
  }
</script>

src\router\index.js 配置页面路由

    {
      path: "/login",
      name: "Login"
      component: Login
    }

config\index.js：为了让后端能够访问到前端的资源，需要配置跨域支持，修改为以下内容

    proxyTable: {
      '/api': {
        target: 'http://localhost:8443', // 后端接口地址
        changeOrigin: true,  // 是否允许跨域
        pathRewrite: {
          '^/api': ''  
        }
      }
    }

参考：https://learner.blog.csdn.net/article/details/88925013