前端之Vue day 06 Vue-cli、es6导入导出语法、axios
一、Vue-cli
1.介绍
Vue CLI， 是一个基于 Vue.js 进行快速开发的完整系统。它依赖nodejs解释器环境，这个解释器是基于谷歌v8引擎编写的，能过在操作系统上执行js代码（原本js只能运行在浏览器中）
运用的单页面应用(spa)结构，一个页面，套很多很多组件
注意：
浏览器只能识别 js html css，所以vue-cli创建项目开发，在项目中开发，最后上线，一定要编译成浏览器老三样
# 官方文档
https://next.cli.vuejs.org/zh/guide/
2.搭建
1.安装nodejs
下载安装就行，一般推荐下16.几,或者18.几
https://nodejs.org/zh-cn/download/releases/
一些小指令：
cmd下
node -v # 查看当前node版本
node #进入node环境
.exit # 退出node
2.安装cnpm模块
cnpm相当于npm，以后就替代npm，直接取淘宝镜像下载，速度快
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装vue-cli
cnpm install -g @vue/cli
4.使用vue-cli创建项目
过程要做很多选择，注意下
vue create myfirstvue
>>>
Please pick a preset:
Manually select features # 选这个
然后设置一下项目名，就开始创建，要花点时间
二、pycharm打开vue项目
1.启动
在pycharm的命令行中，执行启动命令，需要一点时间
npm run serve
还有一种方法
三、Vue项目目录介绍
myfirstvue #项目名
-node_modules # 有很多的小文件夹，该项目的依赖，项目要运行没有他不行，如果没有这个项目，需要执行cnpm install 进行安装，以后传项目给别人时，要把这个忽略掉
-public #文件夹
-favicon.ico #网站小图标
-index.html # 单页面开发，不要动他
-src # 核心文件夹，内容重要，所用到的东西都这里
-assets # 静态资源，以后前端用的图片，js，css。。都放在这里
logo.png # 图片
-components # 以后在这里放组件， xx.vue, 小组件
HelloWorld.vue # 提供的展示组件
-router # 前面安装了Router，就会有这个文件夹，下面有个index.js
index.js
-store # 前面安装了Vuex，就会有这个文件夹，下面有个index.js
-index.js
-views # 页面组件，大组件
-AboutView.vue
-HomeView.vue
-App.vue # 根组件，new Vue实例管理了 div，以后原来写在div中的东西，现在都写在APP.vue中
-main.js # 项目的启动入口
.gitignore # git的忽略文件，后面学了git就会了
babel.config.js # bable配置文件，不用动
jsconfig.json # 配置文件，不用动
package.json #不用动，安装了第三方模块，它自动增加
package-lock.json # 锁定文件，忽略掉
README.md # 用户手册
vue.config.js # vue的配置文件
四、研究开发vue项目规范
1.新建xx.vue
2.在xx.vue中就三块内容，一个vue文件最少要有一块
#1 以后组件的html内容，都写在这里，大外层只能包一个标签里
<template>
<div> </div> # 比如说一个大div包着
</template>
#2 以后该组件使用的样式，都写在这
<style>
</style>
# 3 以后js的东西，都写在这
<script>
</script>
3.研究main.js
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
# >>>其实就是锁定了index.html 中的id为app的div标签
# 并且以后在APP.vue中写的内容，都会映射到被锁定的div中
五、es6导入导出语法
1.前言
JS是在Es6版本及以后开始支持导入导出包
2.导出
在需要传出的文件中，要导出默认值 ，一定要导出，不导出就是用不了的
export default{ }
自己在src下创建一个文件夹，建立一个js文件，名字随意
里面写点内容，比如我就写了var name='jack'
function sum(a,b) {
return a+b
}
export default {name,sum} # 导出去，给外部使用
3.导入
在main.js中，导入一下，注意写法，是字符串，和Python有区别
import gao from './gao/myjs' # 前面就是命名，后面是导入的写法
就可以使用了
console.log('项目开始了')
console.log(gao.name)
4.命名导出、命名导入
其实用起来没啥区别
export const x = (a,b) => { # 定义一个常量，绑定一个函数，把x传出去 此处用了箭头函数
return a+b
}
————————————————————————————————————
import {x} from './gao/myjs' # 导入可以在{}内选择接收几个
console.log('项目开始了')
console.log(x(100,77)) # 直接用
5.导入导出组件（要费点脑子）
我们去研究下src\views\HomeView.vue 看到有这么一个东西，HelloWorld肯定是一个局部组件
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
components: {
HelloWorld
}
}
这就是注册局部组件
然后去HelloWorld.vue里研究
<template>
xxx
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
发现是默认导出，注意，本来局部组件是要写template的，但是被自动注入了，不用写
然后这里运用到了父子通讯的知识，自定义属性等
意思就是，页面组件，导入一下子组件，注册一下子组件，子组件里面默认导出一下自己的数据，就很NICE，页面组件的template中就可以随意使用子组件了
总结：
其实这里都是在用老知识，就只是学了导入导出，一定要注意谁是页面组件，谁是子组件，谁要注册谁，谁要导出谁
HomeView.vue 是页面组件，HelloWorld.vue是小组件，HomeView.vue内注册HelloWorld.vue小组件，HelloWorld.vue内导出自己的数据
注册和导出，都用的默认导出（因为页面组件也要被别的使用，所以都是导出的形式），每个组件都要导出
父子之间数据不共享一定要记住，除非上了ref什么的方法
六、Vue项目中使用axios
1.先安装
在当前pycharm项目的命令栏先停止开启的vue项目
输入cnpm install axios -S # -S意思是把依赖添加到package.json中
2.使用
比如发送post请求，会把第二个参数对应的对象当作body体数据让url携带过去，然后拿到一个res
——————————————————————————————————————————————————
axios.post('http://127.0.0.1:8080/login',{username:this.username,password:this.password})
.then(res=>{console.log(res)})
七、终极解决跨域
https://www.cnblogs.com/liuqingzheng/articles/17132395.html
八、scoped的使用
功能：
让style只给自己用，不染给子组件
用法：
<style scoped>
h1 {
background-color: aqua;
}
</style>
注意
1.. 代表当前所在目录
… 代表当前所在目录的父目录
./ 代表当前所在目录下的某个文件夹或文件
2.python 包如果包含__init__会在包被导入的时候先执行，并且可以写__all__=[]方法规定能被*使用的变量
3.访问根路径，显示只显示页面组件，不会单单显示小小组件
4.访问vue项目的根地址，就是显示HomeView.vue这个大的页面组件
5.解释性语言：运行在解释器之上的 eg：js,ode,php,python
编译型语言：直接把源代码编译成不同平台的可执行文件 eg:c,go,c++
6.APP.vue，里面写的内容，在所有组件中都会显示
浙公网安备 33010602011771号