Vue - 7 Vue-cli项目
Vue - 7 Vue-cli项目
1.Vue - cil创建项目
前端进行组件化开发，①创建Vue项目，单页面应用spa，在xx.Vue文件中编写前端页面。②vue-cli则可以将vue文件通过node.js进行编译，编译成html、css、js等浏览器可以识别语言
①②③④
- 创建vue项目使用什么？
vue2 使用vue-cil
vue3 即可以使用vue-cil，也可以用vite
（1）下载和安装
1.用cnpm替换npm
用npm下载 vue/cli，但是连接的是github比较慢，所以可以用cnpm下载，cnpm是淘宝出的vue工具，下载的时候使用的是淘宝的镜像，速度比较快
# 使用原npm下载 -g 表示安装在全局中
npm install -g @vue/cli
- 用cnpm替换npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.cnpm安装vue-cil
安装npm和cnpm后就可以在终端中输入命令，安装vue包或者创建vue项目
cnpm install -g @vue/cli
（2）使用vue-cil 创建项目
1.新建目录
2.使用终端vue-cil创建项目
由于从github拉一个空项目，并安装该项目所有的依赖包，所以使用npm装速度较慢可以ctrl+c停止
vue create myfirstvue
之后进入命令行选择，开始配置新的vue项目
3.使用vue提供的vue ui图形化界面创建项目
在浏览器中打开vue项目，使用vue ui进行项目创建
（3）启动vue项目
方式1：在命令行中切换到新项目的路径，然后执行如下命令
npm run serve
方式2：在webstrom中打开新项目，然后
2.vue的开发规范
2.1 vue项目开发流程
以后开发vue项目只需要写组件
组件中需要有三个部分：
①<template></template>中写html标签，【插值、方法、事件、指令】
②<script></script>中写js代码，export default {之前写的配置项}
③<script scoped></script>中写css代码，通过scoped属性防止父组件污染子组件样式
以后开发vue项目，都按照
1.新建xx.vue
2.在xx.vue中就三块内容
# 1 组件的html内容，都写成这里
<template></template>
# 2 style样式，组件的样式都写在这里
<style></style>
# 3 js相关代码都写在js中
<script></script>
2.2 vue目录项目介绍
myfirstvue # vue项目名
├── README.md # 用户手册
├── node_modules
# 内容：其中包含了非常多的第三方模块，以后把项目复制给别人是【上传git要忽略掉】，这个文件夹需要删掉。其中包含了很多小文件，包括【项目的依赖】
# 如果没有这个文件夹，只需要在项目路径下执行 cnpm install，根据package.json的依赖包进行安装即可
├── babel.config.js # babel的配置文件
├── jsconfig.json # 配置文件
│
├── package-lock.json # 锁定文件
├── package.json # 安装了第三方模块后会自动增加
├── public # 文件夹
│ ├── favicon.ico # 网站小图标
│ └── index.html # spa 单页面应用，以后整个vue项目都是用这一个html页面来写
├── src # 进行组件化开发的文件夹
│ ├── App.vue # 根组件文件，通过new Vue生成的实例管理的div标签，以后原来写在div中的东西现在都写在App.vue中
│ ├── assets # 静态资源文件，前端需要用到的js、css文件等都放在这个文件夹下
│ │ └── logo.png
│ ├── components # 局部组件文件夹，用于编写组局组件文件
│ │ └── HelloWorld.vue
│ ├── main.js # 项目的启动入口，找到index.html中id为app的div，然后将app.vue 中的东西替换到id=app的div中
│ ├── router # 在创建vue项目的时候选择了Router时，则会出现，用于配置前端的路由
│ │ └── index.js
│ ├── store # 在创建vue项目的时，选择了Vuex则会出现，
│ │ └── index.js
│ └── views # 全局组件文件夹
│ ├── AboutView.vue
│ └── HomeView.vue
└── vue.config.js # vue的配置文件，相当于django中的settings.py文件
3.es6的导入导出语法
注意：
-
导入的前提是-->导出对象，才能导入使用
-
没有导出的对象，相当于隐藏对象
-
vue组件开发三板斧：template、style、script
- main.js是项目的启动入口，找到public文件夹下面的index.html中id为app的div，然后将app.vue 中的东西替换到id=app的div中
3.1 默认导入导出
（1）导出语法
默认导出只能导出一次，一般导出一个对象
export default 对象
（2）导入语法
import 别名 from '路径'
之后别名就是导出的对象，可以通过别名.的方法来使用导入的对象
案例
test.vue - 导出
①在局部组件<template></template>标签中编写页面
②通过export default导出组件对象，默认导出只导出一个对象
<template>
<div id="test">
<h2>{{word}}</h2>
</div>
</template>
<script>
// 默认导出，以对象的形式导出，在别的页面中想用到该组件中的东西，前提是这个页面中的东西已经导出了
export default {
name: "test",
data(){
return {
word:'这里是test组件',
}
},
}
</script>
AboutView.vue
①通过import导入局部组件
②在components中注册组件
③在template标签中写上组件标签
<template>
<div class="about">
<h1>This is an about page</h1>
<hr>
<test></test>
<hr>
</div>
</template>
<script>
// 默认导入
import test from '@/components/test.vue'
export default {
components: {
// components配置项中注册
test
}
}
</script>
3.2 命名导入导出
（1）命名导出
通过export关键字 + const ，可以导出可以导出多个对象
export const age = 123
export const addNum = (a, b) => {
return a + b
}
（2）命名导入
需要用括号括起来，通过import导入
import {js变量, js-function} from '路径'
案例
test.js - 定义变量和函数
①新建js文件，在js文件中定义变量和函数
②通过export关键字导出变量和函数，没有导出的对象则隐藏起来
export const age = 123
export const addNum = (a, b) => {
return a + b
}
main.js - 命名导入对象
①通过括号，命名导入对象
②通过别名，则可以在文件中使用导入的对象
import {age,addNum} from './js/test'
console.log(age)
console.log(addNum(100,150))
3.3 index.js导入的简写形式
例如
包下的 index.js导入的时候，不用写到index.js的路径，index在js中有特殊含义表示首页
如同python中包中的 __init__.py文件，导入的时候只用导入到文件夹级别，不用写明到__init__.py
import js from './js'
3.4 vue项目编写步骤
① 只需要写xx.vue，
- 页面组件
- 局部组件：给页面组件用的
② 在组件中导出
export default {
name: 'HelloWorld',
data() {
return {
xx: '彭于晏'
}
},
}
③ 在别的组件中使用，导入并注册
import HelloWorld from '../components/HelloWorld.vue'
export default {
components: {
HelloWorld
}
}
④ 注册以后，在这个组件中就可以使用导入的组件，写在template标签中
<HelloWorld msg="传进来的数据"/>
4.小联系 - 登录功能
后端：解决跨域==》安装django.cor.headers
前端：使用axios发送ajax请求
4.1 App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
4.2 main.js
项目的启动文件没有改变
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
4.3 在根组件中注册
HomeView.vue中，1.导入登录组件页面，并注册登录组件 2.在template中使用<LoginView></LoginView>标签
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<!-- <HelloWorld msg="Welcome to Your Vue.js App"/>-->
<LoginView></LoginView>
</div>
</template>
<script>
import LoginView from "@/components/LoginView";
export default {
name: 'HomeView',
components: {
// HelloWorld
LoginView
}
}
</script>
4.4 LoginView.vue - 使用axios发送ajax请求
①②③④
① 使用npm安装axios
-S 会自动把当前依赖加入到package.json中
npm install axios -S
② 在LoginView.vue中导入axios
import axios from 'axios'
③ 编写登录页面，使用axios发送ajax请求给后端
给登录按钮绑定点击事件，触发axios方法发送ajax请求
<template>
<div class="login">
<h2>登录页面</h2>
<div>用户名：<input type="text" v-model="username"></div>
<div>密码：<input type="password" v-model="password"></div>
<button @click="handleClick">登录</button>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: "LoginView",
data() {
return {
username: '',
password: '',
}
},
methods: {
handleClick() {
console.log(this.username)
console.log(this.password)
axios.post('http://127.0.0.1:9000/user/login/', {username: this.username, password: this.password}).then(
res => {
console.log(res)
}
)
},
},
}
</script>
4.5 解决跨域
通过安装第三方模块django-cors-headers解决跨域问题
1 安装模块
pip3 install django-cors-headers -i https://pypi.tuna.tsinghua.edu.cn/simple/
2 注册app
'corsheaders'
3 中间件修改
'corsheaders.middleware.CorsMiddleware',
4 修改配置文件
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_METHODS = (
'DELETE',
'GET',
'OPTIONS',
'PATCH',
'POST',
'PUT',
'VIEW',
)
CORS_ALLOW_HEADERS = (
'XMLHttpRequest',
'X_FILENAME',
'accept-encoding',
'authorization',
'content-type',
'dnt',
'origin',
'user-agent',
'x-csrftoken',
'x-requested-with',
'Pragma',
'token'
)
5.scoped属性 - 限定CSS样式在组件的作用域
scoped 是一个 Vue 组件选项，它允许你将 CSS 样式限定在组件的作用域内。这意味着在一个组件中定义的样式只会应用于该组件中的元素，而不会影响到其他组件或全局样式。
父组件的样式，在子组件中会生效，加入scoped让该样式只在当前组件中生效
<style scoped>
h1 {
background-color: red;
}
</style>
6.MacOS安装npm包权限问题
1、异常信息：
Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/cnpm'
2、解决办法：
2.1、第一步：修改目录权限，执行如下命令
sudo chown -R $USER /usr/local/lib/node_modules
2.2、第二步：增加sudo命令，再次执行npm安装命令如下：
我这里是安装淘宝镜像命令，大家可以根据自己需要安装的包替换即可
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
补充
配置项
- el(template)
- data：组件中要写成方法
- methods：方法
- 8个生命周期钩子函数
- components：组件
- watch：监听属性
- computed：计算属性
文件防篡改
1 把文件生成md5值
2 以后被下载下来，再生成md5值是一样的，如果不一样说明被篡改了，不可以使用了
后端与前端
1 前端运行在浏览器上，后端运行在操作系统之上
2 后端主要就是操作数据库，监听网络端口，进行操作
解释型语言和编译型语言
1 解释型语言：js、node、PHP、python、运行在解释器之上
pyinstaller...
2 编译型语言：c、go、c++
直接把源代码编译成不同平台(window、macos、Linux)的可执行文件，但是不支持跨平台。。。
-
java：一处编码处处运行
java虚拟机，虚拟机跨平台，java字节码运行在虚拟机之上，java写了代码编译成字节
