2写vue的基本步骤

vue的基本步骤

vue的代码都放在生成的src里面，src下有：App.vue是根组件，main.js和components(里面放其他组件)

1. 先在components中定义一个组件名，在里面写内容，下面以HelloWorld.vue为例：

   <template>
     <div class="hello">
       <h1>{{ msg }}</h1>
     </div>
   </template>
   
   <script>
   //组件是功能模块界面
   //data有两种表示方法：1.函数形式，2.对象形式
   //在组件中必须写成函数的形式
   export default {  //暴露出去
     name: 'HelloWorld',
     data () { 
       return {
         msg: 'Welcome to Your Vue.js App'
       }
     }
   }
   </script>
   
   <!-- Add "scoped" attribute to limit CSS to this component only -->
   <style scoped>
   h1{
     color: red;
   }
   </style>
   

2. 点开App.vue

   • 引入HelloWorld.vue
   • 映射组件标签
   • 使用组件标签
     

     <template>
       <div id="app">
         <img src="./assets/logo.png">
         <HelloWorld/> <!--3.使用组件标签-->
       </div>
     </template>
     
     <script>
     //1. 引入HelloWorld组件
     //2. 映组件标签
     import HelloWorld from './components/HelloWorld'
     
     export default {
       components: {
         HelloWorld
       }
     }
     </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>
     

3. 完成main.js

   • 引入vue
   • 写vue实例
   • 引入App
   • 把App渲染成标签（映射组件标签）
   • 用template使用组件标签
     

     //入口js:创建vue实例
     //1. 引入vue
     //2. 写vue实例
     //3. 引入App
     //4. 把App渲染成标签（映射组件标签）
     //5. 用template使用组件标签
     import Vue from 'vue'   //区分大小写
     import App from './App'
     
     /* eslint-disable no-new */
     new Vue({
       el: '#app',   //vue实例中的el是根目录下index.html中的id
       components: { App },
       template: '<App/>'
     })
     

4. npm run dev 运行浏览器，查看效果