这里写自定义目录标题

• • 1 vue-cli项目目录介绍
  • 2 新建组件，使用组件
  • 3 vue-router的使用
  • 4 导入导出语法（es6）
  • 5bootstrap& jquery的使用
  • 6 elementui的使用
  • 7 axios的使用

1 vue-cli项目目录介绍

mysecondvue           # 项目名
	-node_modules # 项目的依赖包 （类似于venv文件夹），可以删掉，给别人发一定要删除
    -public            # 文件夹
    	-favicon.ico   # 网站小图标
        -index.html    # 整个网站的index页面，单页面开发
    -src               # 文件夹
    	-assets        # 网站的静态文件和资源
        -components    # 一堆组件，小组件
        	-HelloWorld.vue # 自定义的组件
        -router        # vue-router相关
        	-index.js  # js文件
        -store         # vuex相关，不用管了
        -views         # 一堆组件，页面组件
        	-Home.vue  # 页面组件
       -App.vue             # 根组件
       -main.js            # 整个项目的入口，（对比settings.py）
   -.gitignore         # git相关，目前无用	
   -babel.config.js    # 不用管
   -package.json       # 项目的依赖的包，类似于 requirments.txt
					 # 后期node_modules删除了，依赖于这个文件安装模块 npm install 
   -README.md          # 关于项目的介绍
    
    
    
# 以后写代码，都在src写，其它地方一般不动
    
  

2 新建组件，使用组件

# 以后写vue的项目，就是创建组件，编写
	-每个组件都有三部分
        <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的使用

# 以后只需要在router---index.js中复制粘贴
	-在这个常量中const routes，写对象
        {
            path: '/',
            name: 'Home',
            component: Home
    	}

4 导入导出语法（es6）

# 导出，新建一个js，定义变量，方法，
	-使用export default 对象
# 导入，在任意js中，根据路径导入
	-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' //utils就是刚刚导出的对象
let res=utils.add(1,2,)

5bootstrap& jquery的使用

#1 执行两条命令，安装
cnpm install jquery -S 
cnpm install bootstrap@3 -S

#2 使用，在main.js中写代码
	import 'bootstrap'
	import 'bootstrap/dist/css/bootstrap.min.css'
# 3 以后在 template中写bootstrap的样式即可
# 4 在项目根路径新建
	# vue.config.js
    const webpack = require("webpack");
    module.exports = {
        configureWebpack: {
            plugins: [
                new webpack.ProvidePlugin({
                    $: "jquery",
                    jQuery: "jquery",
                    "window.jQuery": "jquery",
                    "window.$": "jquery",
                    Popper: ["popper.js", "default"]
                })
            ]
        }
    };
    
# 5 以后在js中使用
	$.ajax({
        url: 'http://127.0.0.1:5000/',
        type: 'get',
        success:(res)=> {
            console.log(res)
        }
    }
    )

6 elementui的使用

# web端（pc端）：elementui，iview
# 小程序，安卓：uni-app, vant:ui库

7 axios的使用

1 cnpm install axios -S
2 直接使用
import http from 'axios'
http.get().then(res=>{})