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项目

image-20230220100420010

image-20230220100645023

image-20230220100728711

image-20230220100842193

image-20230220102250634

3.使用vue提供的vue ui图形化界面创建项目

在浏览器中打开vue项目,使用vue ui进行项目创建

image-20230220171521527

(3)启动vue项目

方式1:在命令行中切换到新项目的路径,然后执行如下命令

npm run serve

方式2:在webstrom中打开新项目,然后

image-20230220171113293

2.vue的开发规范

2.1 vue项目开发流程

以后开发vue项目只需要写组件

组件中需要有三个部分:

<template></template>中写html标签,【插值、方法、事件、指令】

<script></script>中写js代码,export default {之前写的配置项}

<script scoped></script>中写css代码,通过scoped属性防止父组件污染子组件样式

image-20230220190121582
以后开发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

image-20230220190121582
  • main.js是项目的启动入口,找到public文件夹下面的index.html中id为app的div,然后将app.vue 中的东西替换到id=app的div中
image-20230220191434822

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的路径,indexjs中有特殊含义表示首页

如同python中包中的 __init__.py文件,导入的时候只用导入到文件夹级别,不用写明到__init__.py

image-20230220202143237
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写了代码编译成字节

posted @   Duosg  阅读(54)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
点击右上角即可分享
微信分享提示