vue-cli4在安装完成后创建一个简单的新页面

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

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

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

在文件中输入代码如下

  
    
    
    
    
    
  
  
  

    {{ message }}
  
  

第三步，在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来查看运行效果

 

至此，一个新的页面就创建完成了。