Vue-CLI 项目搭建、vue项目目录介绍、es6导入导出语法、小练习-登录功能

目录

一、Vue-CLI 项目搭建

Vue-CLI 项目相当于vue框架的脚手架，可以创建vue项目

1、nodejs 解释器环境

1.1、node环境介绍

node是一个基于Chrome V8引擎的javascript运行环境，是运行在服务器端的javascript
可以使用node搭建服务器，连接数据库。让前端开发人员走向后端开发。

Vue-CLI 项目（vue脚手架）必须要安装 node js 解释型语言

-node js是一门后端语言
    -JavaScript只能运行在浏览器中，因为浏览器中有他的解释器环境
    -有一群大佬基于谷歌浏览器的v8引擎(js解释器)，做出了node环境，使能JavaScript够运行在操作系统上，让他跟后端代码一样可以进行各种操作
    	-文件操作
        -网络操作
        -数据库操作  模块

1.2、安装nodejs

它的语法就是js语言

官网下载：https://nodejs.org/zh-cn/download/一路下一步

安装完会释放两个命令(在环境变量中，任意路径都能敲这两个命令)

node      python3
npm       pip

cnpm      等同于pip ，只是下模块，直接取淘宝镜像站下载，速度快

2.安装vue-cli

通过vue-cli脚手架创建vue项目（类似于django---》django项目---》django-admin

npm install -g @vue/cli

'''只要装成功，又会多出一个可执行文件  vue'''

npm下载时候，去国外源下载的，速度慢，可使用国内镜像

淘宝做了一盒cnpm可执行文件，用来替换npm，以后所有使用npm的地方都换成cnpm即可

安装cnpm
	npm install -g cnpm --registry=https://registry.npm.taobao.org

3、vue-cli创建项目

cmd创建项目

vue create myfirstvue

'''
速度很慢，等，如果时间特别长的话，可以ctrl+c停止，执行下行命令
		npm cache clean --force

很慢的原因
	从github拉一个空项目
	按照该项目所有的依赖，npm装
'''

按照下图操作

image

image

image

image

image

4、运行vue项目

  • 方式一：在命令行中敲：npm run serve

  • 方式二：在pycharm中点击绿色箭头运行

    imageimage

二、vue项目目录介绍

myfirstvue				# 项目名
	-node_modules		# 有很多小文件，该项目的依赖，项目传给别人，这个文件夹要删掉，如果这个文件夹没有，npm install 生成，并且装好该项目的依赖
    -public				# 文件夹
    	-favicon.ico	# 网站顶部小图标
        -index.html		# 单页面开发，整个项目就这一个html
    -src				# 文件夹，内容很重要，以后咱们的代码主要在这些，组件、js、css。。
    	-assets			# 公共图片，js、css，都可以放在这里
        -components		# 小组件，放在页面组件中使用的小组件，xx.vue
        -store			# 安装了vuex，就会生成，下面有个index.js
        -router			# 安装了vue-router，就会生成，下面有个index.js
        -views			# 页面组件，放了一个个页面组件
        -App.vue		# 根组件
        -main.js		# 整个项目的入口
    .gitignore        	# git版本管理忽略文件
    babel.config.js   	# babel的配置，不用管
    jsconfig.json		# 配置文件，不用动
    package.json      	# 项目的配置，和依赖模块都在这，不用动，安装了第三方模块，它自动增加
    package-lock.json	# 锁定文件，忽略掉
    README.md         	# 项目的介绍
    vue.config.js     	# vue的配置信息

三、es6导入导出语法

1、App.vue、main.js、About.vue写了什么

### 看xx.vue组件学到的重点 ###
# 记住，以后开发vue项目，都按照这个模式来
	-1 新建xx.vue
    -2 在xx.vue中就三块内容
    	#1 以后组件的html内容，都写在这里
        	<template>
			</template>
        
        #2 以后该组件使用的样式，都写在这
            <style>
            </style>

        # 3 以后js的东西，都写在这
            <script>
            </script>

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

2、导入导出语法

在一个js中使用另一个js中的代码(变量、函数)

每个模块中，只允许使用唯一的的一次export default，否则会报错

  • 默认导出与导入

    定义导出内容
	export default 标识符;		# 此处的标识符代表之前定义的某个变/常量、函数或类
    
    import 导入标识符 from 路径; # 导入标识符可以与导出时使用的标识符不同，此时即视为隐式重命名
    import { default as 新标识符 } from 路径; # 对只有默认导出的模块重命名必须使用default关键字以及大括号

    匿名默认导出与导入，注意一个模块只能存在一个默认导入

    # 定义导出内容
export default { ... }; // 大括号内部可包含部分或所有之前定义的内容

# 对只有匿名默认导出的模块，必须重命名，且必须使用default关键字以及大括号
import { default as 新标识符 } from 路径;

  • 命名导出与导入

    逐个导入与按需导入：

    export 类型关键字1 标识符1 = 值1;
export 类型关键字2 标识符2 = 值2;
# 更多导出

import { 标识符1 as 新标识符，标识符1，... } from 路径; # 此处的标识符与导出模块相同

    批量导入与按需导入：

    # 定义导出内容
export { 标识符1，标识符2, ... };

import { 标识符1 as 新标识符，标识符1，... } from 路径; # 此处的标识符与导出模块相同

    批量导入并再导出后，按需导入：

    import ...
import ...
...
export { 标识符1，标识符2, ... };
export { 标识符a，标识符b, ... };
# 虽然分开导出看起来有点怪，但是可以直接复制导入模块的导出语句，不用重新写一遍，比较方便。但仅限开发自己的模块时，三方模块还是需要手写再导出语句，除非能拿到导出源码

import { 标识符1 as 新标识符，标识符1，标识符a，... } from 路径; #此处的标识符与导出模块相同

    在包下可以建立一个名为index.js 的文件，以后导入的时候，会默认找它

3、vue项目编写步骤

# 1 以后只需要写xx.vue   
	-页面组件
    -小组件   给页面组件用的
    
# 2 组件中导出
	export default {
          name: 'HelloWorld',
          data() {
            return {
              xx: '彭于晏'
            }
          },
	}

# 3 在别的组件中要用，导入，注册
	# 导入
	import HelloWorld from '../components/HelloWorld.vue'
    # 注册
    export default {
      components: {
        HelloWorld 
      }
    }
 # 4 注册以后，在这个组件中就可以使用导入的组件 ，写在<template>
	# 自定义属性
	<HelloWorld msg="传进来的"/>

四、小练习-登录功能

1、App.vue 动了

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

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

3、访问根路径

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

4、使用axios

1 按装 
	cnpm install axios -S    # 带着-S会自动把当前依赖加入到package.json中
2 导入（按照的第三方模块，直接导入）
	import axios from 'axios'
    
3 使用
	handleClick() {
      console.log(this.username, this.password)
      axios.post('http://127.0.0.1:8000/login/', {username: this.username, password: this.password}).then(res => {
        // console.log(res)
        alert(res.data.msg)
      })

    }

5、解决跨域

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 20:26  dear丹  阅读(33)  评论(0)  编辑  收藏  举报