xuchao/work
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

vue1

Browse Source
This commit is contained in:
httpxuchao 2022-03-07 16:26:37 +08:00
commit ce325cb72c
13 changed files with 27403 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
.gitignore vendored Normal file
View File

@ -0,0 +1,23 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

24
README.md Normal file
View File

@ -0,0 +1,24 @@
# vue1
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

5
babel.config.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

27103
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

43
package.json Normal file
View File

@ -0,0 +1,43 @@
{
"name": "vue1",
"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.11",
"vue-router": "^3.5.3"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.15",
"@vue/cli-plugin-eslint": "~4.5.15",
"@vue/cli-service": "~4.5.15",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

17
public/index.html Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

11
src/App.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<router-view></router-view>
</template>
<script>
</script>
<style>
</style>

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

58
src/components/HelloWorld.vue Normal file
View File

@ -0,0 +1,58 @@
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>
For a guide and recipes on how to configure / customize this project,<br>
check out the
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
</p>
<h3>Installed CLI Plugins</h3>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
</ul>
<h3>Ecosystem</h3>
<ul>
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>

28
src/main.js Normal file
View File

@ -0,0 +1,28 @@
import Vue from 'vue'
import App from './App.vue'
import Router from "vue-router"
const routes = [{
path:"/",
component: ()=>import("./pages/index.vue")
},{
path:"/user",
component: ()=>import("./pages/user.vue")
}]
Vue.use(Router)
const router = new Router({
routes,
})
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router
}).$mount('#app')

60
src/pages/index.vue Normal file
View File

@ -0,0 +1,60 @@
<template>
<div>
这是首页 <button @click="next">去下一页</button> <br>
用户名：<input v-model="user1" type="text" name="user1"><br>
账号：<input v-model="user2" type="text" name="user2"><br>
密码： <input v-model="user3" type="password" name="user3">
<ul>
<li @click="chuancan" v-for="{item,index} in list" :key="index">{{item.name}}&nbsp;{{item.age}}</li>
</ul>
</div>
</template>
<script>
export default {
name: "PageIndex",
data() {
return {
user:"",
user2:"",
user3:"",
// list:[
// { name:"张三",age:18 },
// {
// name:"李四",age:20
// }]
}
},
methods: {
next() {
// let user = this.user
// this.$router.push("/user?user=" + this.user)
this.$router.push({
path: "user",
query: {
// 传入参数
canshu1: this.user1,
canshu2: this.user2,
canshu3: this.user3,
// 自定义传入参数
// canshu4: 123
}
})
},
// chuancan(name) {
// this.$router.push({
// path: "user",
// query: {
// canshuming3: name
// }
// })
// }
}
}
</script>
<style scoped>
</style>

31
src/pages/user.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div>
这是user
<button @click="back">返回上一页</button>
<button @click="getquery">获取传参</button>
</div>
</template>
<script>
export default {
name:"PageUser",
methods: {
back() {
this.$router.go(-1)
},
getquery() {
// 获取参数
console.log("用户名：" + this.$route.query.canshu1);
console.log("账号：" + this.$route.query.canshu2);
console.log("密码：" + this.$route.query.canshu3);
}
}
}
</script>
<style scoped>
</style>