提交项目
众辉
3 years ago
parent
d1eb62e476
commit
110b9fa903
@ -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?
|
||||
@ -0,0 +1,24 @@
|
||||
# hello_world
|
||||
|
||||
## 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/).
|
||||
@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
|-- HELLO_WORLD 项目名称
|
||||
|-- node_modules 依赖文件
|
||||
|-- public 静态资源
|
||||
| |-- favicon.ico 页面tab图标
|
||||
| |-- index.html 挂载的页面
|
||||
|-- src 主要开发的源码
|
||||
|-- App.vue 根组件
|
||||
|-- main.js 整个项目的入口,引入依赖包、默认页面样式等
|
||||
|-- assets 资源文件
|
||||
| |-- logo.png
|
||||
|-- components 公共组件
|
||||
|-- HelloWorld.vue
|
||||
|-- .browserslistrc 浏览器约定(可写到package.json中去)
|
||||
|-- .eslintrc.js eslint配置(可写到package.json中去)
|
||||
|-- .gitignore 提交忽略文件配置
|
||||
|-- babel.config.js babel配置文件(使es6+向后兼容适配浏览器的js环境)
|
||||
|-- jsconfig.json
|
||||
|-- package-lock.json 版本锁定文件
|
||||
|-- package.json 版本信息
|
||||
|-- README.md
|
||||
|-- vue.config.js webpack相关配置(vue)
|
||||
@ -0,0 +1,23 @@
|
||||
/* 主要作用是vscode导入使用别名时可以自动化提示文件路径 */
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",//指定要使用的默认库(lib.d.ts)。值为 "es3", "es5", "es6", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020", "esnext".
|
||||
"module": "esnext",//在生成模块代码时指定模块系统。值为“ amd”、“ commonJS”、“ es2015”、“ es6”、“ esnext”、“ none”、“ system”、“ umd”
|
||||
"baseUrl": "./", //解析非相关模块名称的基础目录
|
||||
"moduleResolution": "node", //指定如何解析导入模块。值为“node”和“classic”
|
||||
"paths": { //@出现提示路径
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [//含默认的库文件
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
],
|
||||
},
|
||||
"include": [//提示的文件包含区域
|
||||
"src"
|
||||
]
|
||||
}
|
||||
Binary file not shown.
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "hello_world",
|
||||
"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.8.3",
|
||||
"vue": "^2.6.14"
|
||||
},
|
||||
"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-router": "^4.1.5",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@ -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>
|
||||
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div>
|
||||
<button style="margin-right:10px" v-for="item in btnList" @click="choseComponent(item)" :key="item.id">{{item.name}}</button>
|
||||
</div>
|
||||
<h3>{{title}}</h3>
|
||||
<div class="box">
|
||||
<LifeHook v-if="title=='生命周期'"></LifeHook>
|
||||
<EmptBox v-if="title=='新建组件'"></EmptBox>
|
||||
<DataTestVue v-if="title=='绑定数据'"></DataTestVue>
|
||||
<get-value v-if="title=='取值'"></get-value>
|
||||
<Parent v-if="title=='父子传值'"></Parent>
|
||||
|
||||
<div v-if='title=="App"'>
|
||||
<h1>无组件显示</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LifeHook from './components/LifeHook.vue'//生命周期
|
||||
import EmptBox from './components/EmptBox.vue'////新建组件
|
||||
import GetValue from './components/GetValue.vue'//取值
|
||||
import DataTestVue from './components/DataTest.vue'//绑定数据
|
||||
import Parent from './components/Parent.vue'//父子传值
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
DataTestVue,
|
||||
EmptBox,
|
||||
GetValue,
|
||||
Parent,
|
||||
LifeHook
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
title:'App',
|
||||
btnList:[
|
||||
{id:1,name:'生命周期'},
|
||||
{id:2,name:'新建组件'},
|
||||
{id:3,name:'绑定数据'},
|
||||
{id:4,name:'取值'},
|
||||
{id:5,name:'父子传值'},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
choseComponent(router){
|
||||
this.title = router.name
|
||||
}
|
||||
}
|
||||
}
|
||||
</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; */
|
||||
}
|
||||
.box{
|
||||
border: 1px solid #eee;
|
||||
background: #ddd;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>显示的是data中input的数据:{{input}}</h1>
|
||||
<input v-bind:value="input" @input="change" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
input:'这是data中定义的数据'
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
change(e){
|
||||
this.input = e.target.value
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
这是一个新建的空白组件
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,27 @@
|
||||
<template>
|
||||
<div style="background:gold;margin: 20px;">
|
||||
<div style="cursor:pointer" @click="title='这是父组件传递过去的'">点击重置父组件title:{{title}}</div>
|
||||
<Child :title="title" @updateTiTle="updateTiTle"></Child>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Child from './Child.vue';
|
||||
export default {
|
||||
name:'Parent',
|
||||
components:{
|
||||
Child
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
title:'这是父组件传递过去的'
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
updateTiTle(title){
|
||||
this.title = title
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
@ -0,0 +1,8 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
render: h => h(App), //箭头函数es6 render:function(h){return h(c)}
|
||||
}).$mount('#app')
|
||||
@ -0,0 +1,14 @@
|
||||
const { defineConfig } = require('@vue/cli-service')
|
||||
const { config } = require('process')
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true, //自动判断node_modules有需要es6=>es5转换内容
|
||||
// publicPath:'/xxx',
|
||||
lintOnSave:false,
|
||||
devServer:{
|
||||
port: 3000,
|
||||
open:true
|
||||
},
|
||||
chainWebpack:config =>{
|
||||
config.plugin('friendly-errors').use
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue