Vue - 7 Vue-cli项目

Vue - 7 Vue-cli项目

目录

• 1.Vue - cil创建项目
  • （1）下载和安装
    • 1.用cnpm替换npm
    • 2.cnpm安装vue-cil
  • （2）使用vue-cil 创建项目
    • 1.新建目录
    • 2.使用终端vue-cil创建项目
    • 3.使用vue提供的vue ui图形化界面创建项目
  • （3）启动vue项目
• 2.vue的开发规范
  • 2.1 vue项目开发流程
  • 2.2 vue目录项目介绍
• 3.es6的导入导出语法
  • 注意：
  • 3.1 默认导入导出
    • （1）导出语法
    • （2）导入语法
  • 案例
    • test.vue - 导出
    • AboutView.vue
  • 3.2 命名导入导出
    • （1）命名导出
    • （2）命名导入
    • 案例
    • test.js - 定义变量和函数
    • main.js - 命名导入对象
  • 3.3 index.js导入的简写形式
  • 3.4 vue项目编写步骤
• 4.小联系 - 登录功能
  • 4.1 App.vue
  • 4.2 main.js
  • 4.3 在根组件中注册
  • 4.4 LoginView.vue - 使用axios发送ajax请求
  • 4.5 解决跨域
• 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写了代码编译成字节