标签：Vue 06 项目 js 导入使用组件 vue

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 创建项目

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

创建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，点击绿色箭头执行

目录介绍

项目名		
		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'
)

标签：Vue,06,项目,js,导入,使用,组件,vue
From： https://www.cnblogs.com/qiguanfusu/p/17138324.html

Vue 06

vue-cli 创建项目

什么是cli呢？

Cli是什么意思呢？

使用项目开发的流程

安装vue-cli

vue 的简单命令

创建vue项目

vue项目目录介绍

目录介绍

es6 导入到处语法

APP.vue

main.js

导入导出语法

默认导入

默认导出

按需导入

按需导出

总结：

vue 项目编写步骤

scoped

小练习登录功能

APP.vue

main.js

访问根路径

使用axios

关于跨域问题

相关文章

赞助商

阅读排行

Vue 06

vue-cli 创建项目

什么是cli呢？

Cli是什么意思呢？

使用项目开发的流程

安装vue-cli

vue 的简单命令

创建vue项目

vue项目目录介绍

目录介绍

es6 导入到处语法

APP.vue

main.js

导入导出语法

默认导入

默认导出

按需导入

按需导出

总结：

vue 项目编写步骤

scoped

小练习 登录功能

APP.vue

main.js

访问根路径

使用axios

关于跨域问题

相关文章

赞助商

阅读排行

小练习登录功能