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

短命女 2023-07-24 14:58 11阅读 0赞

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]

#### **这是 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">
        
        <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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]: /images/20230528/fc21e568ca0046858681992987c1dfcd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230528/10a2ee17af854e24ac3bad2cd109556e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: /images/20230528/be4c4d37197f47c48085e2fda0059d48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]: /images/20230528/b126eaf6c709404f9ed75b651686e498.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 2]: /images/20230528/60dd183f235a44cba9ea9ba0837420cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 3]: /images/20230528/52be928d36b9463f8b90bd79c65f694a.png