vue2.0项目实践操作

1. 页面的开始
   1.1导入页面
   1.2引入bootstrap以及jQuery
   1.3引入element
   1.4导入css
   1.5导入js
2. 使用less
   2.1less基础使用
3. 页面中使用组件
   2.1注册组件
   2.2父子组件数据传输
   2.3$refs使用方法
4. 使用axios
   3.1axios的基本用法
   3.2请求图片’@/assets
5. 请求的接口json-serve
   4.1安装
   4.2json-serve的基本使用方法
6. vue.config.js配置手机访问项目
7. 项目技术细节
8. 生命周期函数

页面的开始

导入页面

fisrst.vue,模板生成，可以在vscode里面安装vue插件，然后文件中输入.vue

<template>
  <div class="root"></div>//模板下只能有一个子元素
   <div class="root">//这样是错误的
</template>

<script>
export default {

}
</script>

<style>

</style>

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'//导入路由
import fisrstfrom '../components/fisrst.vue'//导入页面的路径

Vue.use(VueRouter)//使用路由

const routes = [
  {
    path: '/',
    name: 'fisrst',
    component: fisrst
  },
  ]

引入bootstrap以及jQuery

public/index.html（全局引入）

<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

引入element

npm i element-ui -S
npm install babel-plugin-component -D
bable.config.js中修改文件
再按照官网的方法按需引入（我下面也有案例介绍）

bable.config.js中修改一下文件
module.exports = {
  presets: ["@vue/app"],
  plugins:[
    [
      "component",
      {
        "libraryName":"element-ui",
        "styleLibraryName":"theme-chalk"
      }
    ]
  ]
}

按需引入组件，main.js中改文件
import { Button } from 'element-ui';//以后需要引入的组件，可以继续在{}里面继续写，但是要加上"，"。
Vue.component(Button.name, Button);

局部导入css

在“style标签里面写入”@import “…/css/fp.css”;

引入js

a.js
function u(){
    alert()
}

export { //弹出去
    u
   }
a.vue
import {u} from '../js/a.js'//{u}方法名
methods:{
    d:function(){
        u()//使用里面的方法
    },
    }

使用less

npm install -g less(如果出现了文件夹报错，就说明没有权限)

first.less

@width: 10px;
@height: @width + 10px;//变量

#header {
  width: @width;
  height: @height;//使用
}
//然后切换到项目目录 cmd执行lessc src/css/firstpage.less firstpage.css

注册组件

注册组件

在写在页面文件中（.vue）,导入之后，记得要用起来，不然会报错！
<script>
import headera from "../components/headera";//这里是我提前准备好的一个组件，所有得去创建一个才能注册组件。
export default {
components: {
 headera,
}
}
</script>
用法： <headera></headera>（直接写页面中）

父子组件数据传输

父组件的文件

<template>
    <div>
        <h3 style="color:red;">我是父组件的</h3>
        <son :title="msg"></son>//将组件写上去
    </div>
</template>
<script>
import son from './child.vue'   //引入子组件son.vue
export default {
  components: { //注册子组件 
    son
  },
  data () {
    return {
      msg: 'try'
    }
  }
}
</script>

子组件的文件

<template>
    <div>
        <h3>我是子组件的</h3>
        {{title}} 
    </div>
</template>
<script>
export default {
  props: ['title'] //从父组件那获得的东西
}
//
</script>

$refs使用方法

ref:就是给元素的一个标识，后面可以调用this.$refs来获取这个元素

 <input type="text" placeholder="请输入用户名"  ref="sumbitname" v-model="sumbitnamef">
  console.log(this.$refs.sumbitname)

使用axios

axios的基本用法

 ax(){
       axios({
           methods:"get",//请求的方法
           url:"http://localhost:3000/cishi"//请求的地址，我请求的地址是一个json-server的地址
       }).then((res  =>  this.before  = res.data[0].id,//赋值操作
       console.log(this.before)//成功后的一个操作
       
       )).catch((resa => console.log(resa)))//错误的一个操作
   }
   

请求图片'@/assets

开始之前，需要在vue.config.js里面配置publicPath:"./"（或者也可以不用）那是一个路径配置

<div class="service-inside"  v-for="item in first " :key="item.id" >//v-for:循环获得数据
          <div class="service-inside-header">
            <h1>{{item.title}}</h1>
            <div>
              {{item.describe}}
            </div>
          </div>
          <el-row :gutter="10" class="service-row">
            <el-col :md="6" :sm="6" :xs="12">
              <div class="computer-img">
                <img :src="require('@/assets/' +item.img)"  alt="" />//@/assets等于../assets,require:写了就可以将图片地址变为base的格式，就可以渲染出来了，不然就是直接把你写的东西直接渲染，例如：@/assets/' +item.img这是你写的图片路径，那浏览器就是如实渲染上去，不会变成base格式，就渲染不出来。
              </div>

请求的接口json-serve

安装

npm install -g json-server

json-serve的基本使用方法

创建一个json-server文件夹，然后里面再创建一个db.json

db.json
{
    "servetitle": [
      { "id": 1, "title": "服务行业", 
        "describe": "我 " ,
        "img":"computer.png", 
      }
    
    ],
    }

创建完之后，json-server --watch db.json(cmd里面输入。然后启动)，浏览器输入： http://localhost:3000/名称

vue.config.js配置手机访问项目

手机访问项目，需要处于同一个网络，设置好之后，在手机浏览器输入项目的url

module.exports = {
  devServer: {
    disableHostCheck: false,
    host: "电脑ip地址",
    // 
    // 
    port: 8080,//端口号
    https: false,
    hotOnly: false,
    proxy: null,
   
    
  },

项目技术细节

v-for指令的运用 v-for:新的数据 in 旧的数据

 <div class="case-shows-inside" v-for="casepg in caserequest" :key="casepg.index">
  <div class="service-inside-header">
              <h1>{{ casepg.title }}</h1>
              <div>
                {{ casepg.describe }}
              </div>
            </div>
</div>

export default {
data() {
    return {
      caserequest: [title:"1",describe:"2"],
    };
  },
}

v-once:只渲染一次

 <div v-once>{{v}}</div>//变量v不会一直加加，只会等于1
    <button  @click="v++" >+</button>

v-pre:不解析某行html，提高性能

<div v-pre>{{v}}</div>//页面输出{{v}}
    <div>{{v}}</div>//页面输出1

export default {
data(){
    return{
	v:"1"
}
}

@inpute获得input的值，实时监视数据的变化

 <el-input @input="adminname"></el-input>         
  export default {
 methods: {
 adminname(value){  //@input可以获取输入框的值，将获得的值传入value*
      if(value.length < 1){
        this.errora = "用户名不能为空"
      }else{
        this.errora = ""
      }
    }
}
}                 

默认打开登录页面

const routes = [
  {
    path: '/',//设置/就可以默认打开login.vue
    name: 'login',
    component: login
  },
  ]

Vue-router 中有hash模式和history模式,一个要#一个不用

const router = new VueRouter({
 mode: 'history',
  mode: 'hash',
  })

生命周期函数

created，在页面渲染之前执行


debugger使用方法：package.json中输入
“rules”: {
“no-debugger”: “off”,
“no-console”: “off”
},
vue.config.js输入
module.exports = {
configureWebpack: {
devtool:‘souce-map’
},
}

created(){
        
         console.log("created")//在控制台可以看到打印出的内容，但是html并没有渲染出来
             debugger//用于断点
         
     }

mounted:用于页面挂载完之后，再执行里面的语句