vue项目的开发

vue项目的开发

 咱们已经经过命令行建立了一个vue项目，而且打开了这个项目。下面是这个文件的src文件夹，这个文件夹放了整个项目的核心代码。

1、vue文件的用处简介。

　1.assets文件夹，用来存放图片，文件等资源。直接这样就能够访问到 src="./assets/logo.png"，最好的访问方式 src="@/assets/logo.png" ， @能够本身设置指向的文件夹，

　2.componets文件夹，主要是用来存放咱们的vue文件，之要路由能找到，怎么写都行。

　3.router文件夹，主要是用来存放路由，vue的页面入口至于一个就是App.vue， 其余全部的页面都至关于App.vue的组件，路由的做用就是控制这些组建的替换，从直观上感受就是页面的跳转，咱们也能够这样理解。下面会详细介绍。

　4.App.vue，这个vue是整个项目的入口，在里面写的样式是全局的样式，路由渲染的组件会渲染到 router-view里面。默认的 <img src=".assets.logo.png">要去掉，要否则每一个页面都有。


　5.main.js主要用来存放组件，引用组件的配置文件，关于组件后面会详细的介绍。

　6.处了src文件夹，config中index.js还配置了路径端口值等。

 

　  2、新建vue页面

　1.新建页面

　咱们在components下面新建了一个index.vue页面。点击事件 @click="countNum"。 页面赋值{{}} 。

<template>
  <div>
      这是一个首页<br> 点了几回按钮{{count}}<br> <button @click="countNum">点我</button> </div> </template> <script> export default { data() { return { count: 0 } }, created(){ //这里的js执行是在页面尚未加载时候  }, mounted(){ //这里的js执行是在页面加载完成时候  }, methods: { countNum(){ //这里是执行事件的方法 this.count += 1; } } } </script> <style scoped> /* scoped 属性是让css只在这个页面执行 */ </style>

　以下图页面新建完成，咱们去写路由跳转。

2.路由跳转

vueRouter 新添加的页面在路由里注册才能跳转。咱们找到注册的时候path 就是咱们跳转的地址。

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

import index from '@/components/index'  //新添加的页面在路由里注册才能跳转
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',             //这是页面首页
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/index',        //index页面就是 咱们新建的页面
      name: 'index',
      component: index
    }
  ],
  mode: "history"  // 默认mode:hash 访问连接http://localhost:8000/#/   咱们设置为"history" 访问连接http://localhost:8000/
})

这样咱们就能访问到这个页面。路由这一块应该没有什么问题。

 

　3、使用组件开发

　　咱们会经过组件写一个页面的首页来介绍组件。

　　1.组件的安装和引入。

　　经常使用的组件安装，安装组件在命令行打开，复制指令回车，就能够安装。

移动端经常使用组件：

Vant Weapp 安装指令 :

npm i vant -S      //vue安装

npm i vant-weapp -S --production   //微信小程序安装

//在 main.js里全局引入 

import Vant from 'vant'; 

import 'vant/lib/index.css'; 

Vue.use(Vant);

  Vux 安装指令 :

npm install vux --save  

//在 main.js里全局引入 

import Vue from 'vue'
 import { Actionsheet } from 'vux' Vue.component('actionsheet', Actionsheet)

pc端经常使用组件：

element ui 安装指令 :

npm i element-ui -S

vue-baidu-map 安装指令 :

$ npm install vue-baidu-map --save

咱们举个例子，就很是容易理解。

这是vant 官方的轮播组件使用教程。main.js引入。页面代码演示，右侧结果展现。

咱们先在main.js引入。咱们是全局引入。若是对vue熟悉后,建议vue组件模块引入。

而后再在index.vue复制组件代码，

十几行代码就引用成功了一个轮播图。其余的能够去官网去看使用方法，https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/swipe

 

 

　　4、自定义组件开发

　　  咱们本身写一个vue页面，把这个页面当组件。页面使用组件而且传递参数。

　　  咱们新建一个导航栏页面navigationBar.vue，这个页面是每个页面的头部，不须要单独显示，全部不须要路由注册。

 

 代码以下：

<template>
    <div class="head-box">
      <img src="@/assets/return.png" mode="" class="return-icon" v-on:click="navigateBack"/>
      <div class="inline-block">
        首页
      </div>
    </div>
</template>

<script> export default { data(){ return { } }, props:['type','id'], //接收调组件的页面的传参  mounted() { console.log(this.type) //打印参数 console.log(this.id) }, methods: { navigateBack(){ this.$router.go(-1); } } } </script> <style scoped> .head-box { line-height: 4rem; font-size: 1.1rem; text-align: center; /* padding-top: 1.6rem; */ background: linear-gradient(to right, rgba(255, 139, 26, 1), rgba(255, 104, 32, 1)); color: #FFFFFF; position: fixed; z-index: 2; width: 100%; top: 0; } .head-img { width: 1.8rem; height: 1.8rem; position: relative; float: left; top: 1.25rem; margin: 0 0.9rem; } .fr { float: right; } .inline-block { display: inline-block; } .return-icon { position: absolute; left: 0.625rem; height: 1.375rem; width: 1.375rem; margin-top: 1.25rem; } </style>

 组件页面建好后咱们在index.vue使用这个组件并传递参数type和id。index.vue中的代码：

<template>
  <div>
    <!-- 组件的调用传参 -->
    <navigationBar type="1" :id="id"></navigationBar>
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>
  </div>
  </div>
</template>
<script>
  //找到这个组件
  import navigationBar from '../components/navigationBar.vue'

  export default { // 注册这个组件  components: { navigationBar }, data() { return { id:'123456789', images: [ 'https://img.yzcdn.cn/vant/apple-1.jpg', 'https://img.yzcdn.cn/vant/apple-2.jpg' ] } } } </script> <style scoped> img { width: 60%; } .van-swipe { text-align: center; margin-top: 5rem; } </style>

在页面里运行一下。咱们看到了组件navigationBar.vue，和控制台打印的index.vue传的参数。

 

 　　组件开发就算入门了。若是须要了解更多只能本身动手，认认真真去本身作一个项目。

 

　5、Vuex的使用

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。主要做用是在当前页面给store的数据赋值，其余页面不刷新store的值就能自动变化。若是用不到不要引入。可是，若是您须要构建一个中大型单页应用，您极可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为天然而然的选择。

　　简单的说若是你须要在页面的组件里对一个数据赋值，而且须要在这个页面不刷新就能显示这个数据，缓存作不到。咱们就能够用vuex来实现。vuex组件的使用仍是比较麻烦的，一步步来要有耐心。

　1.安装组件

　命令行安装组件 vuex 官网。

npm install vuex --save

 已经安装成功。

　2.新建store文件

　vuex和router是一个级别的模块。咱们在src下新建一个文件夹store，store文件加下加index.js文件。

 index里代码：

import Vue from 'vue';
import Vuex from 'vuex'
Vue.use(Vuex)


var store = new Vuex.Store({
  state : {
    age: '18',
    name:'liuzhou'
  },
  mutations : {

  }
})
export default store

store下面有两个对象state和mutations。state下又有两个数据：{ age: '18',  name:'liuzhou' } 。咱们成功会访问它。

　3.在main.js里注册。

　　代码以下：

import Vue from 'vue'
import App from './App'
import router from './router'

//组件引入 vant
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

Vue.config.productionTip = false

import store from './store'   //找到store
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,                     //引入store
  components: { App },
  template: '<App/>'
})

在main.js找到并引入store。这样咱们就完成了vuex的安装。

　4.在页面的使用。

　咱们在index.vue里访问一下：

this.$store.state.age

  咱们在初始化的时候修改变量值并都打印了，看一下结果。

 

 数据的操做都没有问题。

 

作到这里基本上开发一个vue项目都没问题了，遇到的问题均可以在网上找组件或者本身写组件就好了。

原文地址：http://www.javashuo.com/article/p-dbwlathp-dx.html 

vue项目的建立文章 连接：http://www.javashuo.com/article/p-exiinlyb-dg.html