vue-cli基本操作

1.vue-cli是什么

简单来说就是Vue搭建的架子

vue-cli安装

全局安装vue-cli

使用下面的命令安装vue-cli3

npm install -g @vue/cli
OR
yarn global add @vue/cli

安装完成，检查vue版本

vue -V

vue-cli创建项目

创建项目名为my-object的项目

vue create my-object

创建完成后，进入项目目录，执行以下命令

cd my-object
npm run serve

在地址栏输入localhost：8080即可进入主页面

整体目录

对内容进行操作

app.vue内容：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="ng1"/>
    <p>{{sum}}-{{a}}={{b}}</p>
    <div v-html="msg1"></div>
    <span>{{info.name}}</span>
    <login></login>
    <ul :class="colo">
      <li v-for="(item,index) in list" :key="item">
        {{item}}-{{index}}
      </li>
    </ul>
    <button @click="flag=!flag">改变flag的值</button>
    <h1 v-if="flag">flag=true</h1>
    <h1 v-else>flag=false</h1>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import login from './components/login.vue'
// import './components/derictive.js'

export default {
  name: 'App',
  data() {
    return {
      info:{
        name:"张三",
        age:20
      },
      list:[1,2,3,4],
      flag:true,
      msg1:"<span>你算哪块小饼干</span>",
      sum:100,
      a:5,
    }
  },
  computed: {
    b:function(){
      return this.sum-this.a
    }
  },
  components: {
    HelloWorld,
    login
  }
}
</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;
}
.remo{
  list-style: none;
}
.colo{
  background-color: palevioletred;
}
</style>

引入的模块login.vue内容：

<template>
  <div>
      <h1>j不会吧不会吧</h1>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

HelloWorld.vue内容：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="add(name)">点击</button>   
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      name:"lisi"
    }
  },
  methods: {
    add(name){
      console.log(name)
    }
  },
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

页面展示：