theluyuan/vue-demo-7
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
luyuan 2021-01-25 16:19:15 +08:00
parent eff288414d
commit 722ab517b0
Signed by: theluyuan
GPG Key ID: A7972FD973317FF3
11 changed files with 242 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -9,7 +9,10 @@
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
"element-ui": "^2.15.0",
"vue": "^2.6.11",
"vue-router": "^3.4.9",
"vuex": "^3.6.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",

16
src/App.vue
View File

@ -1,28 +1,16 @@
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<router-view></router-view>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

BIN
src/assets/back.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 109 KiB

15
src/components/A.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<div>
<p class="title">这是标题</p>
</div>
</template>
<style scoped>
.title{
font-size: 108px;
}
</style>
<script>
export default {
}
</script>

23
src/components/Msg.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<div>
<button class="name">按钮1</button>
<button>按钮2</button>
<Title class="a"></Title>
</div>
</template>
<style scoped>
.name{
color: red;
}
.a >>> .title{
font-size: 10px;
}
</style>
<script>
import Title from "./A.vue"
export default {
components:{
Title
}
}
</script>

14
src/main.js
View File

@ -1,8 +1,18 @@
import Vue from 'vue'
import App from './App.vue'
import Router from "vue-router"
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.use(Router)
import router from "./router/index.js"
import store from "./store/index.js"
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router,
store,
render: (h) =>{
return h(App)
},
}).$mount('#app')

27
src/router/index.js Normal file
View File

@ -0,0 +1,27 @@
import Router from "vue-router"
import store from "@/store/index.js"
let router = new Router({
routes:[
{
path:"/",
component:() => import("../views/index.vue")
},
{
path:"/login",
component:() => import("@/views/login.vue")
}
]
})
router.beforeEach((to, from, next) => {
console.log(to.path,store.state.quanxian)
if(store.state.quanxian){
next()
}else if(to.path != "/login"){
router.push("/login")
}else{
next()
}
})
export default router

15
src/store/index.js Normal file
View File

@ -0,0 +1,15 @@
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
quanxian: false
},
mutations: {
setquanxian(state,data){
state.quanxian = data
}
}
})
export default store

14
src/views/index.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div>
这是首页
{{$store.state.quanxian}}
</div>
</template>
<style scoped>
</style>
<script>
export default {
}
</script>

62
src/views/login.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<div style="" class="login">
<el-form class="box" label-position="left">
<el-form-item label="用户名" style="width:90%">
<el-input v-on:click="login" v-model="username" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="密码" style="width:90%">
<el-input @keyup.enter.native="login" placeholder="请输入密码" v-model="password" show-password ></el-input>
</el-form-item>
</el-form>
</div>
</template>
<style scoped>
.login{
display:flex;align-items: center;justify-content: center;height:100vh;
background-image: url("../assets/back.jpg");
}
.box{
border: 1px solid #ececec;
height: 200px;
width: 500px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: auto;
background-color: #ececec;
border-radius: 10px;
opacity: 0.8;
}
.hangnei{
width: 60%;
}
</style>
<script>
export default {
data(){
return {
username:"",
password: ""
}
},
methods:{
login(){
console.log("登录")
if(this.username =="admin" && this.password =="admin"){
this.$message({
message: '登录成功',
type: 'success'
});
this.$store.commit("setquanxian",true)
this.$router.push("/")
}else{
this.$message.error('登录失败');
}
}
}
}
</script>

69
yarn.lock
View File

@ -1761,6 +1761,13 @@ async-limiter@~1.0.0:
resolved "https://registry.npm.taobao.org/async-limiter/download/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
integrity sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=
async-validator@~1.8.1:
version "1.8.5"
resolved "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz#dc3e08ec1fd0dddb67e60842f02c0cd1cec6d7f0"
integrity sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==
dependencies:
babel-runtime "6.x"
async@^2.6.2:
version "2.6.3"
resolved "https://registry.npm.taobao.org/async/download/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
@ -1813,6 +1820,11 @@ babel-eslint@^10.1.0:
eslint-visitor-keys "^1.0.0"
resolve "^1.12.0"
babel-helper-vue-jsx-merge-props@^2.0.0:
version "2.0.3"
resolved "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6"
integrity sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg==
babel-loader@^8.1.0:
version "8.2.2"
resolved "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.2.2.tgz?cache=0&sync_timestamp=1606424647115&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-loader%2Fdownload%2Fbabel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81"
@ -1830,6 +1842,14 @@ babel-plugin-dynamic-import-node@^2.3.3:
dependencies:
object.assign "^4.1.0"
babel-runtime@6.x:
version "6.26.0"
resolved "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4=
dependencies:
core-js "^2.4.0"
regenerator-runtime "^0.11.0"
balanced-match@^1.0.0:
version "1.0.0"
resolved "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
@ -2662,6 +2682,11 @@ core-js-compat@^3.6.5, core-js-compat@^3.8.0:
browserslist "^4.16.1"
semver "7.0.0"
core-js@^2.4.0:
version "2.6.12"
resolved "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
core-js@^3.6.5:
version "3.8.3"
resolved "https://registry.npm.taobao.org/core-js/download/core-js-3.8.3.tgz?cache=0&sync_timestamp=1611040792158&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-3.8.3.tgz#c21906e1f14f3689f93abcc6e26883550dd92dd0"
@ -2972,7 +2997,7 @@ deep-is@~0.1.3:
resolved "https://registry.npm.taobao.org/deep-is/download/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
deepmerge@^1.5.2:
deepmerge@^1.2.0, deepmerge@^1.5.2:
version "1.5.2"
resolved "https://registry.npm.taobao.org/deepmerge/download/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
integrity sha1-EEmdhohEza1P7ghC34x/bwyVp1M=
@ -3217,6 +3242,18 @@ electron-to-chromium@^1.3.634:
resolved "https://registry.npm.taobao.org/electron-to-chromium/download/electron-to-chromium-1.3.644.tgz#c89721733ec26b8d117275fb6b2acbeb3d45a6b6"
integrity sha1-yJchcz7Ca40RcnX7ayrL6z1FprY=
element-ui@^2.15.0:
version "2.15.0"
resolved "https://registry.npmjs.org/element-ui/-/element-ui-2.15.0.tgz#de9b73a8d1e3e3b50e82b923a5fa95295239bd41"
integrity sha512-9z/1+b7V8fvp08OnKUEW4/BZ72kT+IhuKR9cTMz3XoCTKmEsqLLb32XjbO/DznSFaaiFbOYU93G7WtkvrCAL9A==
dependencies:
async-validator "~1.8.1"
babel-helper-vue-jsx-merge-props "^2.0.0"
deepmerge "^1.2.0"
normalize-wheel "^1.0.1"
resize-observer-polyfill "^1.5.0"
throttle-debounce "^1.0.1"
elliptic@^6.5.3:
version "6.5.3"
resolved "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.3.tgz#cb59eb2efdaf73a0bd78ccd7015a62ad6e0f93d6"
@ -5611,6 +5648,11 @@ normalize-url@^3.0.0:
resolved "https://registry.npm.taobao.org/normalize-url/download/normalize-url-3.3.0.tgz#b2e1c4dc4f7c6d57743df733a4f5978d18650559"
integrity sha1-suHE3E98bVd0PfczpPWXjRhlBVk=
normalize-wheel@^1.0.1:
version "1.0.1"
resolved "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz#aec886affdb045070d856447df62ecf86146ec45"
integrity sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU=
npm-run-path@^2.0.0:
version "2.0.2"
resolved "https://registry.npm.taobao.org/npm-run-path/download/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@ -6695,6 +6737,11 @@ regenerate@^1.4.0:
resolved "https://registry.npm.taobao.org/regenerate/download/regenerate-1.4.2.tgz#b9346d8827e8f5a32f7ba29637d398b69014848a"
integrity sha1-uTRtiCfo9aMve6KWN9OYtpAUhIo=
regenerator-runtime@^0.11.0:
version "0.11.1"
resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9"
integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==
regenerator-runtime@^0.13.4:
version "0.13.7"
resolved "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.13.7.tgz?cache=0&sync_timestamp=1595456224955&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fregenerator-runtime%2Fdownload%2Fregenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55"
@ -6824,6 +6871,11 @@ requires-port@^1.0.0:
resolved "https://registry.npm.taobao.org/requires-port/download/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
resize-observer-polyfill@^1.5.0:
version "1.5.1"
resolved "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz#0e9020dd3d21024458d4ebd27e23e40269810464"
integrity sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==
resolve-cwd@^2.0.0:
version "2.0.0"
resolved "https://registry.npm.taobao.org/resolve-cwd/download/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
@ -7643,6 +7695,11 @@ thread-loader@^2.1.3:
loader-utils "^1.1.0"
neo-async "^2.6.0"
throttle-debounce@^1.0.1:
version "1.1.0"
resolved "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"
integrity sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg==
through2@^2.0.0:
version "2.0.5"
resolved "https://registry.npm.taobao.org/through2/download/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
@ -8073,6 +8130,11 @@ vue-loader@^15.9.2:
vue-hot-reload-api "^2.3.0"
vue-style-loader "^4.1.0"
vue-router@^3.4.9:
version "3.4.9"
resolved "https://registry.npmjs.org/vue-router/-/vue-router-3.4.9.tgz#c016f42030ae2932f14e4748b39a1d9a0e250e66"
integrity sha512-CGAKWN44RqXW06oC+u4mPgHLQQi2t6vLD/JbGRDAXm0YpMv0bgpKuU5bBd7AvMgfTz9kXVRIWKHqRwGEb8xFkA==
vue-style-loader@^4.1.0, vue-style-loader@^4.1.2:
version "4.1.2"
resolved "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz#dedf349806f25ceb4e64f3ad7c0a44fba735fcf8"
@ -8099,6 +8161,11 @@ vue@^2.6.11:
resolved "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
integrity sha1-9evU+mvShpQD4pqJau1JBEVskSM=
vuex@^3.6.0:
version "3.6.0"
resolved "https://registry.npmjs.org/vuex/-/vuex-3.6.0.tgz#95efa56a58f7607c135b053350833a09e01aa813"
integrity sha512-W74OO2vCJPs9/YjNjW8lLbj+jzT24waTo2KShI8jLvJW8OaIkgb3wuAMA7D+ZiUxDOx3ubwSZTaJBip9G8a3aQ==
watchpack-chokidar2@^2.0.1:
version "2.0.1"
resolved "https://registry.npm.taobao.org/watchpack-chokidar2/download/watchpack-chokidar2-2.0.1.tgz?cache=0&sync_timestamp=1604989063099&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fwatchpack-chokidar2%2Fdownload%2Fwatchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"