vue 学习笔记 - 2、简单的一个例子

工程结构

主要文件内容

注意事项
1、vue、vue-router 版本兼容，如不兼容会出现各种问题

• package.json

{
  "name": "vue-demo-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "vue": "2.6.10",
    "vue-count-to": "1.0.13",
    "vue-router": "3.0.2",
    "vuex": "3.1.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "vue-template-compiler": "2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

})

• main.js

import Vue from 'vue';
import App from './App.vue';
## 导入js资源时，必须指定到js文件，指定到文件夹没有用
import router from "./router/index";

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  router,
  render: h => h(App)

• App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

• /router/index.js 路由

import Vue from 'vue'
import VueRouter from 'vue-router';
Vue.use(VueRouter);

import LoginPage from '@/view/login/login.vue';
import IndexPage from '@/view/index.vue';

export const constantRoutes = [
    {
        path: '/',
        name: 'LoginPage',
        component: LoginPage
    },
    {
        path: '/index',
        name: 'IndexPage',
        component: IndexPage
    }
]

const createRouter = () => new VueRouter({
    scrollBehavior: () => ({ y:0 }),
    routes: constantRoutes
})

const router = createRouter();

export default router;

• /view/index.vue 主页面

<template>
  <div>
    <h1 align="center">欢迎来到首页</h1>
    <div class="userName">{{userName}}</div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'IndexPage',
  data(){
    return {
      userName: localStorage.getItem("userName")
    }
  }
}

</script>
<style lang="css" scoped>
.userName{
  align-content: center;
  width: 100%;
}
</style>

• /view/login/login.vue 登录页面

<template>
  <div id="app">
    <div class="login"  >
      <h3>demo演示系统</h3>
      <div class="userName">
        <span>账号：</span><input type="text" v-model="userName"/>
      </div>
      <div class="password">
        <span>密码：</span><input type="text" v-model="password" />
      </div>
      <div class="btn">
        <button @click="login">登录</button>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>
<script >
import router from "@/router/index"
export default {
  name: 'LoginPage',
  data() {
    return {
      userName: '',
      password: ''
    }
  },
  methods:{
    login(){
      localStorage.setItem("userName",this.userName);
      router.push("/index");
    }
  }
};

</script>
<style lang="css" scoped>
.login {
  background-color: #a6f9bb;
  border: 1px solid #ccc;
  width: 400px;
  height: 230px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px #ff000080;
  padding: 20px;
  box-sizing: border-box;
}
.input {
  border-radius: 10px;
}
.userName {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
.user span {
  width: 50px;
}
.user input {
  flex: 1;
  font-size: 20px;
  padding: 3px 10px;
}
.password {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.pwd span {
  width: 50px;
}

.pwd input {
  flex: 1;
  font-size: 20px;
  padding: 3px 10px;
}

button {
  display: block;
  width: 80%;
  margin: 0 auto;
  padding: 5px 0;
  background-color: #009688;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}
h3 {
  margin-bottom: 20px;
  text-align: center;
}
</style>