Vue - 7 Vue-cli项目

1.Vue - cil创建项目
2.vue的开发规范
- 2.1 vue项目开发流程
- 2.2 vue目录项目介绍
3.es6的导入导出语法
4.小联系 - 登录功能
5.scoped属性 - 限定CSS样式在组件的作用域
6.MacOS安装npm包权限问题
补充

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

posted @ 2023-02-20 21:16 Duosg 阅读(54) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Vue - 回顾与总结

· Vue - 1 简介与入门

· vue项目

· python之路73 vue框架 vue-cli创建项目、vue项目目录介绍、es6导入导出语法、登录功能练习、scoped用法

· vue-cli创建项目、项目目录介绍、es6导入导出语法、小练习-登录功能、scoped

公告

昵称： Duosg
园龄： 2年5个月
粉丝： 11
关注： 21

+加关注

2025年3月

日

一

二

三

四

五

六

随笔档案

阅读排行榜

评论排行榜

1. 十二周周末小结结(1)

	vue2 使用vue-cil
	vue3 即可以使用vue-cil，也可以用vite

	# 使用原npm下载 -g 表示安装在全局中
	npm install -g @vue/cli

	以后开发vue项目，都按照
	1.新建xx.vue
	2.在xx.vue中就三块内容
	# 1 组件的html内容，都写成这里
	<template></template>
	# 2 style样式，组件的样式都写在这里
	<style></style>
	# 3 js相关代码都写在js中
	<script></script>

	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文件

	<template>
	<div id="test">
	<h2>{{word}}</h2>
	</div>
	</template>

	<script>

	// 默认导出，以对象的形式导出，在别的页面中想用到该组件中的东西，前提是这个页面中的东西已经导出了
	export default {
	name: "test",
	data(){
	return {
	word:'这里是test组件',
	}
	},
	}
	</script>

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

	export const age = 123

	export const addNum = (a, b) => {
	return a + b
	}

	import {age,addNum} from './js/test'

	console.log(age)
	console.log(addNum(100,150))

	export default {
	name: 'HelloWorld',
	data() {
	return {
	xx: '彭于晏'
	}
	},
	}

	import HelloWorld from '../components/HelloWorld.vue'

	export default {
	components: {
	HelloWorld
	}
	}

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

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

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

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

	- el(template)
	- data：组件中要写成方法
	- methods：方法
	- 8个生命周期钩子函数
	- components：组件
	- watch：监听属性
	- computed：计算属性

duoduosg