利用Vue cli生成一个新的项目（2018/11/24）

一、用Vue-Cli建立一个新项目
建立步骤
 ①搭建脚手架环境     打开CMD--->cnpm  i  vue-cli  -g       ( yarn global add vue-cli)
 ② vue -V      能看到版本就成功
 ③ 新建一个文件夹--->在文件夹路径下打开CMD --->vue init webpack
 ④建立项目（Y/enter*5/N*4）
 
⑤安装依赖
 
 
⑥运行
 
 
二、生成项目后建立组件
 
 
入口文件 main.js  //可以更改的  其中的#app绑定了index.html中的id为app的div
 
单页应用（SPA） index.html   //最后生成的所有内容最后都放在了index.html中的 <div id='app'></div> 中  意思就是在index.html中引用打包好的js文件
 
单组件文件（.vue）  
                相当于 index.html引入的是main.js中的内容，main.js引入了APP.vue中的内容，App.vue引入了 components文件夹中创建的组件中的内容
 
1、建立组件
新建一个vue文件(one.vue) 向其中填入需要的内容——>在APP.vue中  引入组件 ， 注册组件 ， 应用组件
one.vue
 
<template>
   <div @click='btn'>this is a component  of one <h1>{{a}}</h1></div> //组件中的内容必须由一个大div包着
</template>
<script>
   export default{  //默认的导出语句
       data(){
          return{
              a:'only one component',
              flag:false
          }
       },
       methods:{
          btn(){
                 this.a='hello'
              }  
          }
       }
</script>
<style scoped>/*scpoed 表示css只能应用于当前页面的样式*/
   div{
       color:#42B983;
   }
   div h1{
       color:deeppink
   }
</style>
 
APP.vue
 
<template>
  <div id="app">    //脚手架
    <img src="./assets/logo.png">
    <one/>    //2 应用组件
  </div>
</template>
<script>
import one from './components/one'   // 1 引入组件
export default {
  name: 'App',
  components: {  //2 注册组件
   one
  }
}
</script>
<style>
#app {
  font-family: 'Avenir', Helvetica,  Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
 
 
2、用axios取数据 （从后台数据库中取数据）
 
准备：
在文件路径下的CMD安装  cnpm i axios  --save   //用于从后端取数据的插件
CMD  mongod --dbpath=d:/data  
CMD  mongo （选择对应的数据库）
 
（一）后端允许跨域的操作：
在文件路径下 打开CMD npm start ------>（注意要取消防跳index.js  ）---->在后端文件中设置跨域    res.setHeader("Access-Control-Allow-Origin","*");(后端)
 
 
在vue文件中的操作思路思路：
在vue文件中引入 axios    import axios from "axios"----->用created（）从对应端口获取数据 ----->将获取到的数据写入data（）中-------->组件从data（）中获取需要的数据渲染到页面
one.vue
 
<template>
   <div @click='btn'>
        <h1>{{a}}</h1>
       <ul>
          <li v-for='item in  list'>{{item.name}}</li> <!-- 4  通过循环获取需要的数据-->
       </ul>
   </div>
   
</template>
<script>
   import axios from "axios"; // 1  引入axios这个插件
   export default{
       data(){
          return{
              a:'only one component',
              list:[]  //  3  在data中填入获取到的数据
          }
       },
       methods:{
          btn(){
                 this.a='hello'
              },
       },
       created(){ //可以访问data里的数据 ，在此处修改data里的数据
          axios.get("http://localhost:3000/list").then((res)=>{  // 2  用axios方法取对应端口里的数据
              this.list=res.data.list
            })
          }
      }
</script>
<style scoped>
   div{
       color:#42B983;
   }
</style>
 
 
（二）代理跨域 访问数据
 
①config文件夹---->index.js----->module exports ------>dev{ }---->proxyTable{ }      改完代理设置后，一定要重启vue项目
在proxyTable中写入以下内容
proxyTable：{
    "/标识符":{
    target:"http://localhost:3000",    //需要被替代的端口
    changeOrigin:true,
    pathRerewrite:{
    ^/标识符:"/"
    }
}
 
 
②在vue对应的端口处将localhost：端口号  改成   /标识符
 
two.vue     模糊查找
 
<template>
  <div>
   <input type="text" v-model='kw'/>  <!--v-model动态绑定  双向改变-->
   <ul>
       <li v-for='item in  list'>{{item.name}}</li>
   </ul>
  </div>
</template>
<script>
   import axios from "axios";
   export default{
       data(){
          return{
              list:[],
              kw:''
          }
       },
       watch:{ //监听特定值的变化
          kw:{
              handler(){
                 this.getData();
              },
              immediate:true
          }
       },
       methods:{
          getData(){ //获取指定端口的数据
              if(this.kw==="")return
             axios.get("/db/query/"+this.kw).then((res)=>{
                 this.list=res.data
              })
          }
       }
   }
</script>
<style>
</style>
 
避免多次引用：
     axios为了避免多次引用 可以将它直接引入 main.js的文件中  然后将其放在vue的原型上进行使用  在之后写vue文件的时候就不需要引入axios（需要将 axios.get 写为 this.$http.get）
 
main.js
import Vue from 'vue'
import App from './App'
import axios from 'axios'
Vue.prototype.$http=axios
Vue.config.productionTip = false
 
two.vue
created(){ 
          this.$http.get("http://localhost:3000/list").then((res)=>{
              this.list=res.data.list
          })
       }
 
 
 
3.用 json-server 模拟（mock）数据 （自己模拟一个数据）
 
准备：
全局安装 json-server     cnpm i  json-server  -g   
查看版本   json-server  --version
新建一个文件夹 --->在文件目录的CMD中生成一个vue项目----->npm run dev  ----> cnpm  i  axios  --save   ------->在文件目录下新建一个后端文件夹（hd）------>在文件夹中新建json文件 （data.json）并在其中模拟需要的数据 ------>在hd路径下的CDM中  json-server  文件名.json (启动后端数据，不然接受不到数据) 可以将数据甩出去----->localhost:端口号/json的数组名  可以获取到数据 （localhost：3000/list）----->this.$http.get 获取数据 渲染到页面上
 
更改json数据的端口的语句 在hd文件夹的路径下      json-server  文件名.json --port 端口号
data.json
{
   "list":[
       {
          "id":1,
          "name":"zzz"
       }
   ]
}
 
 
one.vue
<template>
   <div>
       <ul>
          <li v-for='item in  list'>{{item.name}}</li>
       </ul>
   </div>
</template>
<script>
   export default{
       data(){
          return{
              list:[]
          }
       },
       created(){
          this.$http.get("http://localhost:3000/list").then((res)=>{
              this.list=res.data
          })
       }
   }
</script>
 
 
4.json-server 增删改查
one.vue
<template>
      <div>
            <h1>{{a}}<span  @click='btn(flag)'>翻译</span></h1>
            <div class='addword'>
                  <input type='text' v-model='word'><button  @click="add">添加新单词</button>
            </div>
            
            <table>
                  <tr>
                        <td v-for='item in words'>{{item.word}}
                              <button @click="del(item.id)">删除</button>
                              <button @click='modify(item.id)'>修改</button>
                              <input type='text' v-model="content"  v-if="currentId===item.id"  @keyup.enter="ok(item.id)"  @keyup.esc="cancle">
                        </td>
                  </tr>
            </table>
      </div>
</template>
<script>
      import axios from 'axios'
      export default{
            data(){
                  return{
                        a:'this is the first component',
                        flag:true,
                        words:[],
                        word:'',
                        currentId:-1
                  }
            },
            watch:{ //动态监听  
                  word(n){ //监控word中的新值 ①获取input中的v-model动态传过来的新值，将这个新值传递给find()方法
                        this.find(n)
                  }
            },
            methods:{
                  getData(){  //获取数据
                        axios.get("http://localhost:3000/words").then((res)=>{
                              this.words=res.data
                        })
                  },
                  btn(flag){
                        if(this.flag){
                              this.a='这是第一个组件'
                              this.flag=false
                        }else{
                              this.a='this is the first component'
                              this.flag=true
                        }
                        
                  },
                  add(){
                        axios.post("http://localhost:3000/words",{   //post是传值进去
                              word:this.word
                        },
                        {
                              headers:{
                                    "content-type":"application/json"
                              }
                  
                  }).then((res)=>{
                        this.getData()
                        this.word=''
                  })
              },
              del(id){
                     axios.delete("http://localhost:3000/words/"+id).then((res)=>{
                        this.getData()
                  })
              },
              find(n){ //全局查找  ② n代表在输入框中输入的新的值，全局查找包含这个n的所有数据
                        axios.get("http://localhost:3000/words?q="+n).then((res)=>{  //这里的q是固定的  代表着全文查找   将q变为name_like就是模糊查找
                              this.words=res.data
                        })
              },
              modify(id){   //修改
                  this.currentId=id
                  var arr = this.words.filter((item)=>{
                        return id ===item.id
                  })
                  this.content=arr[0].word
              },
              ok(id){   //将修改的内容填入
                  axios.patch("http://localhost:3000/words/"+id,{
                        word:this.content
                  }).then((res)=>{
                        this.getData()
                  })
                  this.currentId=-1
              },
              cancle(){  //取消修改
                  this.currentId=-1
              }
            },
            created(){
                  axios.get("http://localhost:3000/words").then((res)=>{
                        this.words=res.data
                  })
            }
            
      }
</script>
<style scoped>
      div h1{
            color:#456123
      }
      div>h1>span{
            color:darkblue;
            font-size: 18px;
            padding-left:20px;
      }
      div>table{
            margin: auto;
            
      }
      div>table>tr>td{
            width: 170px;
            height:30px;
            border:1px solid #456123;
            color: #ffdd99;
            background: #42B983;    
      }
      .addword{
            margin: 10px;
      }
      
</style>
 
posted @ 2019-09-12 10:33  zsrTaki  阅读(276)  评论(0)    收藏  举报