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:用于页面挂载完之后，再执行里面的语句