目录
vue项目目录结构
项目名
├── node_modules -- 项目的依赖
├── public -- 文件夹
├ ├── favicon.ico -- 网站顶部小图标
├ └── index.html -- 单页面开发,项目唯一页面
├── src -- 文件夹,主要代码都在里面
├ ├── assets -- img,js,css,都可以放在这里
├ ├── components -- 小组件,放在页面组件中的
├ ├── store -- 安装了vuex就会生成
├ ├── router -- 安装了vue-router就会生成,配置路由
├ ├── views -- 页面组件存放在这
├ ├── App.vue -- 根组件,靠它和唯一的页面连接的
├ └── main.js -- 整个项目的入口
├── .gitignore -- git版本管理
├── babel.config.js -- babel的配置,不用管
├── jsconfig.json
├── package.json -- 项目的配置,和依赖的模块都在这
├── package-lock.json
├── README.md -- 项目的介绍
└── vue.config.js -- vue的配置信息
项目传给别人,node_modules这个文件夹要删掉,别人通过npm install 生成,装好该项目的依赖。
es6导入导出语法
在一个js文件中想要使用另一个js文件中的变量、函数等,就要用到导入导出语法。
导出
每个模块中,只允许使用唯一的一次export default,否则会报错。
export default 对象
导入
js后缀不用写,如果文件夹内有一个index.js,只导入文件夹,就相当于导入了文件夹下的index.js。
// 全部导入
import 起个名字 from 'js文件名'
// 单独导入
import {变量} from 'js文件名'
举例:
a.js:
const name = 'yietong'
const age = 22
export default {
name:name
}
b.js:
import aa from './a'
console.log(aa.name) // 正常取出
console.log(aa.age) // 没有值,因为没导出
Vue项目开发规范单页面组件写法
vue项目中的每一个vue后缀的文件都是一个组件。
一个vue组件包含以下内容:
- template:html内容
- script:js内容
- style:css样式
比如Vue项目views文件夹下的HomeVie.vue文件:
<template>
<div class="home">
<h1>{
{ aa }}</h1>
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @就相当于/src,这里导入HelloWorld.vue组件
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
// 组件属性写在这
data() {
return {
aa: 'abcd'
}
},
components: {
HelloWorld
}
}
</script>
<!--scoped表示这个css样式只作用于当前组件-->
<style scoped>
img {
width: 100px;
}
</style>
main.js 是整个入口
1. 把App.vue跟组件导入了
2. 使用new Vue({render:h => h(App)}).$mount('#app')把App.vue组件中的数据和模板插入到index.html的id为app 的div中
3, 在每个组件的export default {}写之前学过的所有js的对象
4,在每个组件的template写模板,插值语法,指令
5,在每个组件的style写样式。
vue项目集成axios,vue项目前后端打通
安装axios
npm install axios --S
main.jsz导入使用
import axios from 'axios'
发送请求,获取数据
axios.get('http://127.0.0.1:8000/books/').then(res => {
console.log(res.data)
this.bookList=res.data
})
解决django项目跨域问题的一种方式
1,