初识vue（4）——基于脚手架编写项目

这里我总结一下基于脚手架编写项目的基础写法。

首先说明一个问题，如果同时打开两个vue项目，vue项目不会像react项目一样询问第二个端口号是否改成 3001，所以在同时运行两个 vue 项目前，需要手动更改 端口号。位置：

其次，如果我们想在运行项目后，自动打开页面，可以将下面代码的 false ，改成 true ：

在搭建好脚手架项目后，我删除了components文件夹、App.vue 、main.js这几个自动生成的文件，重新写我的项目代码。这是文件目录，当然，和原来的文件名称位置并无不同：

这是 HelloWorld.vue 代码：

<template>
    <div>
      <p class="msg">{{msg}}</p>
    </div>
</template>

<script>
    export default {//配置对象（与Vue一致）
      data(){//必须写函数
        return {
          msg:'Hello Vue Component'
        }
      }
    }
</script>

<style>
  .msg{
    color: red;
    font-size: 30px;
  }
</style>

这是 App.vue 代码：

<template>
  <div>
    <img class="logo" src="./assets/logo.png" alt="logo">
    <!--3.使用组件标签-->
    <HelloWorld/>
  </div>
</template>

<script>
  //1.引入组件
  import HelloWorld from './components/HelloWorld.vue'
  export default {
    //2.映射组件标签
    components:{
      HelloWorld
    }
  }
</script>

<style>
  .logo{
    width: 200px;
    height: 200px;
  }
</style>

这是 main.js 代码：

/*
入口JS：创建Vue实例
 */
import Vue from 'vue'
import App from './App.vue'
new Vue({
  el:'#app',
  components:{
    App
  },
  template:'<App/>'
})

其中main.js是入口文件。

以上是基于脚手架编写的基础小项目。

下面运行项目：

npm run dev

点击蓝色的端口号：http://localhost:8080 或者复制链接在浏览器打开，得到如下项目界面：

若要实现其他效果，照此种方式编写代码实现效果即可。