Vue 06

Vue06

vue-cli 创建项目

在使用前端做项目的时候我们会使用到一个工具： vue-cli
	1.创建出一个vue 项目，单页面开发，组件化开发，把App.vue，ts,saas,less  编译成能够在浏览器中执行的文件。

什么是cli呢？

  • 1.如果只是简单的写几个vue的demo程序，name就不需要使用上vueCli脚手架的
  • 2.如果是在大型的项目开发，name就必须要也是必然要使用到vueCli的
    • 在使用vue.js开发项目时，我们需要考虑到代码的结构目录，项目接口和部署，热加载，代码单元测试等事情。
    • 如果在每个项目都要手动完成这些项目的话，哪么效率是极低的，所以我们通常会使用得到脚手架来帮助我们更好完成这些事情
  • 3.vue-cli工具是使用nodejs写的，如果要运行，就需要使用node环境

下载安装node解释器：

Cli是什么意思呢？

  • CLi就是Commond-Line Interface，翻译为命令行界面，俗称脚手架。
  • VueCLI是一个官方发布vue.js项目脚手架。
  • 使用VueCLI可以快速搭建vue开发环境以及对应的webpack配置。

使用项目开发的流程

  • 1，在vuecli创建项目开发，在项目中开发最后上线，上线到浏览器中，一定会转换成纯粹的HTML，js，css
    • 因为浏览器只能识别js，css，html

安装vue-cli

下载安装

npm install -g @vue/cli
  • 使用cnpm替换npm ，cnpm是淘宝出的工具，下载的时候，去淘宝的镜像下载，速度会快些
  • -g 在这里表示的是全局 global
  • 淘宝镜像路径
--registry=https://registry.npm.taobao.org
  • 以后安装插件就将cnpm 代替npm
    cnpm install -g @vue/cli

vue 的简单命令

  • 进入cmd控制台，输入vue

  • vue 创建vue项目

  • 使用vue-cli 创建项目（先要确定好目录）

vue create  项目名   
# 这样创建项目的速度很慢，可以换个方式 先 停止创建，执行下面这句；
npm cache clean--force

项目创建慢的原因：
	它是从Git hup上拉一个空项目
    按照该项目所有的依赖，npm来装的

使用 vue UI 创建项目

  • 这是一个图形化的项目，按照界面的指示一步步点击创建即可

image

image

image

image

创建vue项目

会使用到的工具

-2.x 版本的vue
	vue-cli  ：https://cli.vuejs.org/zh/
    
-3.x 版本的vue
	vue-cli
    vite ：这个只能创建vue3 效率非常高

vue项目目录介绍

使用pycharm 打开项目，运行项目的两种方式、
	在cmd中 执行（需要注意路径）
    	- npm run serve
   使用 pycharm，点击绿色箭头执行

image

目录介绍

项目名		
		myhtml 
文件夹
	node_modules  :这里存放的很多的第三模块，如果以后把项目复制给别人的时候【上传到Git上都要忽略掉】，（这个文件夹要删掉。因为它里面有很多的小文件，他压缩起来很慢，拷贝起来也很慢；这里面放着的都是项目的依赖，【就是使用的第三方模块的原代码】）；但是自己的项目运行没有这个文件是不行的，如果没有的情况下执行
    cnpm install 即可  它会根据package.json里面的依赖包，安装好我们需要的依赖
    
public    
		-favicon.ico    # 网站小图标
    	-index.html     # spa 单页面应用，以后整个vue项目都是用这一个html，但不需要动它
  
src    以后的使用的都是这里面的
	-assets     # 静态资源，以后前端使用的图片，js，css，都放在这里
    	-logo.png	图片
    - components	# 以后的组件都放在这里，例：xx.vue ,一些小组件
    - router	# 在创建项目的时候安装了Router，就会有这个文件夹，下面会有一个 index.js
    - store		#安装了vuex，就会有这个文件夹，下面有个index.js
    	index.js
    -views		页面组件
    	-AboutView.vue
        -HomeView.vue
   - APP.vue	根组件，new vue实例管理了div，以前在div中写的东西，以后写到这里 
	main.js		项目的启动入口
    
.gitignore       Git的忽略文件
babel.config.js	 bable配置文件
jsconfig.json	安装第三方模块的时候会自动增加
README.md		用户使用手册
vue.config.js	vue的配置文件

es6 导入导出语法

APP.vue

以后在开发vue项目，都是下面的这个模式
	1.新建xx.vue
    2.xxx.vue 中就三块内容
    	1.组件HTML的内容写在：
            <template>
            </template>
        2.写js的内容写在：
            <script>
            </script>
        3.这个组件	使用的样式；
        	 <style>
    		 </style>

main.js

找到index.html 中id 为app的div，以后都会在app.vue 中写
    new Vue({
      render: h => h(App)
    }).$mount('#app')
    createApp(App).use(store).use(router).mount('#app')

导入导出语法

vue中导入与导出语法经常见到，并且也经常使用，导入与导出语法主要分默认和按需。

默认导入

  • 默认导入：import router from @/routr【import 后面的对象名根据自己的写的输入】
  • 如果使用默认导入就必须要使用默认到处

默认导出

  • 默认导出：export default 一般是一个对象
  • 一个文件只有一个默认导出。例如：export default router

按需导入

  • 要导入按需导出的成员，就必须按需导入

  • 语法：import {login} from "@/api/username"(可以导入多个成员，成员之间使用逗号隔开)

    import {name, height } from "../publicjs/aaa";

  • 起别名：import { login as loginuser } from "@/api/user"

  • 批量导入：import * as all from "@/api/user"使用的时候直接使用 all.login()

导入的简写：

在导入包下的index.js daoru 的时候，不用写到 index.js的路径。它等同于python中的__init__.py 

例如：
	包名： app01
    	文件： view.js
 导入： import app01 from './view'

按需导出

  • 导出使用 export

例如：export const constantRoutes= ()=>{}

  • 导出的可以是一个变量，数组，对象，函数。。

  • 按需导出课可以导出多个成员

总结：

  • 当文件中只导出一个成员的时候就使用默认导出
  • 当文件中需要导出多个成员的时候，通常使用按需导出

vue 项目编写步骤

1.  在 APP.vue 中编写
	- 页面组件
    - 小组件  给页面组件使用
    
2.组件中导出
	export default {
          name: 'HelloWorld',
          data() {
            return {
             name：'text'
            }
          },
	}
    
3. 在别的组件中要使用，需要导入，注册
导入：
	import HelloWorld from '../components/HelloWorld.vue'
注册
    export default {
      components: {
        HelloWorld 
      }
    }

4.注册以后，在这个组件中就可以使用导入的组件，写在<template>
	# 自定义属性
    <HelloWorld msg ='传进来的组件'/>

scoped

原理：

	在vue中，在style标签上只要添加了scoped属性，就表示它的样式只会作用在当前的模块上。这样就会很好的实现了样式的公有化和私有化的目的。
	# 在父组件的样式，在子组件中会生效，加了scoped属性。样式就只会在当前组件中生效
    <style scoped>
    h1 {
        background-color: chartreuse;
    }
    </style>

小练习 登录功能

APP.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

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')

访问根路径

# 访问vue 的根 显示的是 HomeView.vue 这个页面组件
	- HomeView使用了HelloWorld.vue
    -自定义属性
# 访问/about 就会显示 AboutView.vue 页面组件

使用axios

1.安装

	cnpm install axios -S
    带着-S会自动把当前依赖加入到package.json 中

2.导入（按照第三方模块，直接导入）

import axios from 'axios'

3.使用

handleClick(){
    consonle.log(this.username,this.password)
    axios.post('http://127.0.0.1:8000/login/',{username:this.username,password:password}).then(res=>{
        alert(res.data.msg)
    })
}

关于跨域问题

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'
)
posted @ 2023-02-20 17:38  亓官扶苏  阅读(22)  评论(0)    收藏  举报