1 vue-cli项目目录介绍
mysecondvue
-node_modules
-public
-favicon.ico
-index.html
-src
-assets
-components
-HelloWorld.vue
-router
-index.js
-store
-views
-Home.vue
-App.vue
-main.js
-.gitignore
-babel.config.js
-package.json
-README.md
2 新建组件,使用组件
-每个组件都有三部分
<template>写html内容,原来组件的template</template>
<script> js,data,methods,created,</script>
<style>样式</style>
-新建一个 xx.vue,默认生成了三部分
-在<template>写html,学的vue的插值,指令,事件。。。
-在<script>写js,学的data,methods,。。。。
-在<style>中写样式,之前学的css
-想访问某个路径,就能够显示这个页面组件
-router--->index.js--->在const routes = []数组中加对象
-{
path: '/',
name: 'Home',
component: Home
}
-import 起个名字 from '../views/UserDetail.vue'
-新建一个 xx.vue,默认生成了三部分
-在<template>写html,学的vue的插值,指令,事件。。。
-在<script>写js,学的data,methods,。。。。
-在<style>中写样式,之前学的css
-想在页面组件中使用
-导入:import HelloWorld from "../components/HelloWorld";
-在页面组件中注册:
components:{ //自定义了一个局部组件
'HelloWorld':HelloWorld
}
-在<template>中使用这个小组件,自定义属性。。。
3 vue-router的使用
-在这个常量中const routes,写对象
{
path: '/',
name: 'Home',
component: Home
}
4 导入导出语法(es6)
-使用export default 对象
-import utils from '../utils' //utils就是刚刚导出的对象
-使用:utils.add(2,3)
const name = 'lqz'
let age = 10
function add(a, b) {
console.log(age)
return a + b
}
export default {
'name': name,
'add': add
}
import utils from '../utils'
let res=utils.add(1,2,)
5bootstrap& jquery的使用
cnpm install jquery -S
cnpm install bootstrap@3 -S
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
const webpack = require("webpack");
module.exports = {
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
"window.$": "jquery",
Popper: ["popper.js", "default"]
})
]
}
};
$.ajax({
url: 'http://127.0.0.1:5000/',
type: 'get',
success:(res)=> {
console.log(res)
}
}
)
6 elementui的使用
7 axios的使用
1 cnpm install axios -S
2 直接使用
import http from 'axios'
http.get().then(res=>{})