1.vue脚手架文件结构
├── node_modules:存放项目依赖
├── public： 一般放置一些静态资源(图偏)
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 一般放置多个组件共用的静态资源
│ │ └── logo.png| | ------router ：配置项目中的路由
│ │── component: 存放组件的文件夹，一般放置的是非路由组件/全局组件
│ │ └── HelloWorld.vue
│ │── App.vue: 唯一的根组件
│ │── main.js: 整个项目的入口文件
├── .gitignore: git版本管制忽略的配置(哪些文件需要git管理，哪些文件不需要git管理)
├── babel.config.js: babel的相关配置文件
├── package.json: 应用包配置文件，依赖，类似于pom.xml
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件，缓存性文件，记录项目上的依赖都从那儿来的等信息
注意:一切皆组件一 个组件中
js代码+html代码+css样式
1. VueCli开发方式是在项目中开发-个- 个组件对应一个业务功能模块，日后可以将多个组件组合到一起形成一个前端系统
2.日后在使用vue Cli进行开发时不再书写html,编写的是一个组件， 日后打包时vue cli会将组件编译成运行的html文件
2.如何开发VUECLI
1.父子传参
父类
<template><div class="about"><h1>{{msg}}</h1><div><ceshi :msg="msg1" @put="resp"></ceshi></div></div>
</template>
<script>
import ceshi from "@/views/ceshi";
export default {name: 'about',components: { ceshi },data(){return{msg1: '我是父类msg',}},methods:{resp:function (value){this.msg=value}}
}
</script>
子类
<template><div><h1>{{msg}}</h1><button @click="emit">点击传值</button><button @click="baidu">百度一下，你就知道</button>我是测试模块<router-view/></div>
</template>
子类
<script>
import axios from "axios";
export default {name: "ceshi",props: {msg: {type:String}},methods:{emit:function (){this.$emit('put','子组件的值');},baidu:function(){this.$http.get("https://api.oioweb.cn/api/SimpWords").then(function (resp) {this.string= resp.data.result.content},function (error) {alert(error)})}}
}
</script>
2.路由
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import ceshi from "@/views/ceshi";
import home from "@/views/home";
import course from "@/views/course";
const routes = [{path: '/',name: 'home',component: home,children: [ // 子路由配置{path: '/course',name: 'course',component: course}]},{path: '/about',name: 'about',component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')},{path: '/ceshi',name: 'ceshi',component: ceshi}
]
const router = new VueRouter({routes
})
export default routerl
路由展示界面
<template><div id="app"><nav><router-link to="/">Home</router-link> |<router-link to="/about">About</router-link>|<router-link to="/ceshi">ceshi</router-link>|</nav><router-view/></div> </template>
3.axios
1.npm install axios
2、全局引入，在src/main.js文件中
-
//main.js -
import axios from 'axios' -
//把axios对象挂到Vue实例上面，使用axios的时候直接全局调用this.$http就可以了 -
Vue.prototype.$http = axios -
axios.get("http://localhost:8080/easthome_edu/course?method=findAll").then(function (resp) {that.tableData=resp.data },function (error) {console.log(error) })
4.引入elementui
全局引入
npm install element-ui -S
main.js文件中引入
import "element-ui/lib/theme-chalk/index.css";
import ElementUI from "element-ui";
Vue.use(ElementUI, { size: "medium" })
