vue基础六

vuecli

脚手架：搭建 vue 单页面应用的 环境

安装

npm i -g @vue/cli

初始化项目

vue create appName
vue ui

目录结构

pulic   
	静态资源目录   静态资源放在public 不会被webpack 处理 最终build 时，不会做任何处理
src
	assets  静态资源  会被webpack处理 css js xx 会自动扔进 dist css目录 js目录 images目录 重新命名
	components 放 公共的组件
	views  路由组件
	router 
		index.js  路由的配置文件
	App.vue 唯一 根组件  router-view 定义路由出口
	main.js 项目唯一的入口文件 所有的代码 最终都在这个js上，如果在main.js中引入资源 就是全局

模块化

使用是es6模块化
1，一个文件就是一个模块
	import "../assets/css/reset.css"
2,提供接口
	export {
		a:11,
		b:xxx
	}
	
	引入
	import { a , b } from '路径'
	import * as xxxx from "xxxx"   
	
	export default 文件(函数、对象、变量)  一个文件只能提供一个接口
	
	import 名字 from 'xxx'
	
	vue import @别名 是指src目录的绝对路径
 

单文件组件

Home.vue

引入全局css reset.css

main.js是入口文件 应该在这里引入

import “.”

vuecli配置文件

在项目根目录下 创建 vue.config.js
解决跨域的问题：
	1，解决开发环境下的跨域问题
		服务器反向代理 express反向代理
	2，生产环境    nginx反向代理
module.exports={
	publicPath:"./", //dist目录中 引入资源的路径
	 devServer:{
        host: "localhost",
        port: "9527",
        proxy: {
            '/api': {
              target: 'http://m.maoyan.com',
              changeOrigin: true,
              pathRewrite: { 
                '^/api': 'http://m.maoyan.com' //路径重写 
                } 
            },
            '/foo': {
              target: ''
            }
          }
      }
}

注意：只要修改了配置文件，哪怕是一个空格 都要重启服务

优雅引入axios

main.js
	import axios from axios
	
	vue.prototype.$http = axios;
在任意组件中通过
	this.$http使用axios

echart
	

vue插件

将一些功能性的代码 封装成 vue插件

怎么使用
	Vue.use(插件名);
一般 会将 其他常用插件 封装 就变成了vue插件 swiper 直接使用原生的
使用vue-swiper插件

vue中使用其他库（不一定是vue插件） swiper

import  Swiper from  'swiper'
import "swiper/css/swiper.css"


new Swiper();  mounted(){}