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写了代码编译成字节
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY