vue-cli基础入门_vue-cli基础写法

声明：本人的所有博客皆为个人笔记，作为个人知识索引使用，因此在叙述上存在逻辑不通顺、跨度大等问题，希望理解。分享出来仅供大家学习翻阅，若有错误希望指出，感谢！

vue-project目录

• node_modules：包文件目录
• public：发布目录
  • index.html ：项目中唯一的页面文件，所有的vue组件最终都在该页面中展示
• src
  • assets：存放静态资源img、css、js等
  • components：组件库，所有的以vue为扩展名的文件都存放在这里
  • router：路由目录，项目添加了vue router后才有该目录
  • store：项目的全局数据中心，项目添加了vuex后才有该目录
  • views：存放各种扩展为.vue的组件，这些组件是页面级的，可以包含components目录中的组件
  • App.vue：vue入口组件文件，初始页面组件，该页面组件被挂载到唯一的index.html文件中
  • main.js：该文件是系统的启动文件。所以和整个项目相关的配置或代码都要在这个文件中编写
• .gitignore：利用git上传时的忽略文件
• babel.config.js：js高级版本改写设置文件，该文件添加了babel后才有
• package-lock.json：包管理文件的锁定版本
• package.json：npm生成的包管理文件
• README.md：github.com中的传统自述文件

views和components的区别：

• components是小组件，views是页面级组件
• 小组件components可被引用在views中，一般views组件不被复用

vue文件交互

import为导入指令，export为导出指令，import能够导入的数据，仅限于指定文件export导出的数据

import和export都是JavaScript代码，在js文件或<script>标签里都可以使用

utils.js文件：

//部分导出，将两个方法分别用export导出
export function helloWorld(){conselo.log("Hello World");}
export function test(){conselo.log("this's test function");}

//全部导出
var helloWorld=function(){conselo.log("Hello World");}
var test=function(){conselo.log("this's test function");}

export default{		//将文件中定义的数据作为一个对象导出
 helloWorld,
 test
}
1
2
3
4
5
6
7
8
9
10
11
12

PS：一个文件中可以有多个export，但是只能有一个export default

other.js文件：

//部分导入
import {helloWorld} from "./utils.js" 	//只导入utils.js中的helloWorld方法
helloWorld(); 		//执行utils.js中的helloWorld方法

//全部导入
import utils from "./utils.js"	//此处utils只是一个变量名，可以随便起名
utils.helloWorld();		//使用import的变量名访问导入的数据
1
2
3
4
5
6
7

PS：import引入一个依赖包，不需要相对路径，import引入一个自己写的js文件，是需要相对路径的

import axios from ‘axios’;
import AppService from ‘./appService’;
1
2

单页VUE结构

<template>
  <div>html代码</div>
  <otherComponent>可以使用子组件</otherComponent>
</template>

<script type="text/ecmascript-6">
    import otherComponent from './otherComponent.vue'	//将需要使用的组件import进来

    export default {
        data:function(){
            return{
            // 数据
            };
        },
        components:{
          otherComponent		// 局部组件注册，需事先将所需的组件import进来
        },
        computed:{
          // 计算属性
        },
        watch:{
          // 数据监听
        },
        methods:{
          // 方法定义
        }
    }
</script>

<style>
  // css 样式
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

• export default 的对象为组件注册时的对象，其中的属性不止上述这些
• 注意data必须是函数（只有vue实例的data是对象）
• data要么不写，要写就必须是：data:function(){ return {}; }，必须返回一个对象

简单路由（插件基本使用框架）

在创建Vue项目时，如果选择了Vue-Router选项，则Vue就会自动安装路由插件：Vue-Router

安装该插件后，基于SPA的Vue项目就可以在不同的组件页面之间跳转，从而模拟原来多页面应用
实际上就是当点击某个菜单时，页面展示出和网页的跳转完全一样的效果。但其本质是不同页面组件之间的切换

创建路由对象的过程

src/router/index.js文件：

import Vue from 'vue'
import VueRouter from 'vue-router'    //导入路由插件
import Home from '../views/Home.vue'  //导入组件页面

Vue.use(VueRouter)  //设置在vue中注册路由插件

const routes = [    //路由数组，存储着当前项目的路由信息
  {
    //该对象的含义：当路由路径为 / 时显示 Home 组件
    path: '/',      //路由路径
    name: 'Home',   //路由名称
    component: Home   //当前路由路径所对应的组件（该组件必须事先import，见第三行）
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')   //懒加载方式，需要时才加载（该组件不需事先import）
  }
]

const router = new VueRouter({    //创建一个路由实例对象，将上方定义的路由数组作为参数传递给构造器
  mode: 'history',    //优化url显示效果
  base: process.env.BASE_URL,     //基本的路由请求的路径，会在所有路由路径之前加上该路径
  routes
})

export default router   //导出实例对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

路由数组 routes 中的每个元素都是对象，其中包含三个基本属性：path，name，component，其核心含义是：某个path，对应一个具体的页面组件

路由数组 routes 中路径为/的路由对象为<router-view>的默认显示路由

页面组件可以有两种加载方式：

• 直接加载，和导入普通的JS文件是一样的使用ESM进行
• 懒加载，此时component属性，成为一个函数，该函数将在路径变成当前时运行，该函数运行时页面组件才会被加载进来

{
    path:'/example',
    name:'Example',
    component:() => import('../views/Example.vue')
}
1
2
3
4
5

---

src/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,	//将路由对象添加到vue实例中，此处是ES6写法，原为router:router
  store,	
  render: h => h(App)   //把App.vue组件添加到虚拟dom中
}).$mount('#app')       //将虚拟DOM实体化并挂载到index.html文件中#app所对应的元素中

/*在创建一个vue实例的时候(var vm = new Vue(options))。Vue的构造函数将自动运行 this._init（启动函数）。启动函数的最后一步为initRender(vm)：
initRender中调用vm.mount(vm.options.el)，将实例挂载到dom上，至此启动函数完成*/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

render: h => h(App)：

render是一个方法，自带一个形参createElement，这个参数也是一个方法，是用来创建vue 节点的，也就是html模板的，然后渲染(render)到指定的节点上。render: h => h(App)相当于将App.vue渲染到vue对象的挂载点#app上

ES6函数简写：

(a,b) => {函数体} 相当于 function(a,b){函数体}

若只有一个形参，函数体只有一行，则可简写为：a => 代码行

利用路由对象实现的“页面跳转”

router-link标签

• 相当于一个a标签，其中的属性to，就是转向具体的路由地址，路由地址是路由数组中每个路由对象的path属性
• 在最终页面中，该标签实际上就是一个a标签

router-link标签样式

• 直接使用标签选择器router-link是没有用的
• 由于router-link标签最终被渲染为a标签，因此可以使用a作为标签选择器

router-view标签

• 实际上就是一个插件点，页面组件将被插入到该位置