vue-cli4在安装完成后创建一个简单的新页面_vue cli新建项目后新建一个页面并运行-CSDN博客

本文链接：https://blog.csdn.net/lyj961222/article/details/105572762

在安装好vue-cli4的前提下，（具体安装方法请看我之前的博客）

第一步，打开编辑器，创建一个新的文件vue.config.js

第二步，在public中创建新的文件：login.html

在文件中输入代码如下

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  <div id="app">
    {{ message }}
  </div>
  </body>
</html>

第三步，在src文件夹中创建文件login.js

在文件中输入以下代码

import Vue from "vue/dist/vue.js";

new Vue({
  el: "#app",
  data: {
    message: "Hello 你好!"
  }
});

第四步，在第一步创建的文件vue.config.js 文件中输入以下代码

module.exports = {
    pages: {
        login: {

            entry: 'src/login.js',  //配置入口js文件
            template: 'public/login.html',  //主页面
            filename: 'login.html',   //打包后HTML文件名称
            title: '后台系统登陆'   //打包后。HTML文件标题
        }
    }
}

第五步，保存提交后，打开浏览器，输入localhost:8080/login.html来查看运行效果