一、Vue CLI https://cli.vuejs.org/zh/guide/installation.html

介绍:

二、安装

# 安装 Vue Cli

npm install -g @vue/cli

目的是可以让你使用Vue命令

# 访问Vue命令

vue --version

三、项目创建

创建方式两种（vue create方式以及使用vue ui命令以图形化界面创建和管理项目）

vue create方式创建

vue create hello-world

运行

注意：npm run  serve 而非 npm run server 否则

查看配置文件

具体访问：

四、写一个hello页面

1、根目录下新建vue.config.js

新建vue.config.js

如图：

代码：

let glob = require('glob')

//配置pages多页面获取当前文件夹下的html和js

function getEntry(globPath) {

    let entries = {}, tmp, htmls = {};

    // 读取src/pages/**/底下所有的html文件

    glob.sync(globPath+'html').forEach(function(entry) {

        tmp = entry.split('/').splice(-3);

        htmls[tmp[1]] = entry

    })

    // 读取src/pages/**/底下所有的js文件

    glob.sync(globPath+'js').forEach(function(entry) {

        tmp = entry.split('/').splice(-3);

        entries[tmp[1]] = {

            entry,

            template: htmls[tmp[1]] ? htmls[tmp[1]] : 'index.html', //  当前目录没有有html则以共用的public/index.html作为模板

            filename:tmp[1] + '.html'   //  以文件夹名称.html作为访问地址

        };

    });

    return entries;

}

let htmls = getEntry('./src/pages/**/*.');

module.exports = {

    pages:htmls,

    publicPath: './',           //  解决打包之后静态文件路径404的问题

    outputDir: 'output',        //  打包后的文件夹名称，默认dist

    devServer: {

        open: true,             //  npm run serve 自动打开浏览器

        index: '/page1.html'    //  默认启动页面

    }

}

2、新建页面

每个页面就是一个单独的文件夹，应包含.html，.js，.vue文件。

3、页面代码

index.html

<!DOCTYPE html>

<html lang="en">

  <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>page2</title>

  </head>

  <body>

    <div id="app"></div>

  </body>

</html>

index.js

import Vue from 'vue'

import App from './index.vue'

Vue.config.productionTip = false

document.title = '奖励详情'

new Vue({

  render: h => h(App)

}).$mount('#app')

index.vue

<template>

  <div id="app">

    <h1>page2</h1>

  </div>

</template>

<script>

export default {

  name: 'page2'

}

</script>

<style>

</style>

4、运行预览

page2的

注意(我index.html、page1.html、page2.html 三个页面都是一样的，可是只有page1.html 出现错了，我怀疑是根目录下配置文件问题)

一、Vue CLI的更多相关文章

  1. vue cli 3.x 项目部署到 github pages

    github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...

  2. @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件

    目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...

  3. vue cli使用融云实现聊天

    公司有个项目要实现一个聊天功能,需求如下图,略显随意 公司最终选择融云这个吊炸天的即时通信,文档详细的一匹,刚开始看文档感觉很详细实现起来也不麻烦,有很多开源的demo可以在线演示和下载 不过我们的项 ...

  4. Vue CLI 3.0脚手架如何在本地配置mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...

  5. Vue CLI 3使用：浏览器兼容性

    package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件),指定了项目的目标浏览器的范围.这个值会被 @babel/preset-env ...

  6. 基于vue cli 3.0创建前端项目并安装cube-ui

    前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...

  7. Vue CLI 3+tinymce 5富文本编辑器整合

    基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...

  8. vue cli 3.0创建项目

    .npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...

  9. vue cli 3 lintOnSave 配置有时无效问题

    一个使用vue cli 3.2创建的项目,创建时未开启 lintOnSave,后来希望开启并设置为 lintOnSave: 'error',但配置不生效. 解决方法1:新创建项目(此时vue cli ...

  10. VS Code引用 vue/cli

    npm i @vue/cli -g    引用cli脚手架 3.0版本 下载好后 找个空文件夹  vue create myvue 创建vue项目   myvue是自己项目名称 Your connec ...

随机推荐

  1. vue问题二：vue打包时产生的问题

    vue项目打包问题:vue中默认的config/index.js的配置的详细理解: 参考文档:https://blog.csdn.net/qq_34611721/article/details/809 ...

  2. sharesdk短信验证码的集成

    在ShareSDK官网http://mob.com/注册并创建Android应用.申请APP_key,下载SDK等 根据官网开发文档导入SDK,目录结构如下 将以上文件按需放入Android Stud ...

  3. Nodejs 之非阻塞 I/O、异步、事件驱动

    1.非阻塞 I/O var fs = require('fs'); console.log('); fs.readFile('mime.json',function (err,data) {//rea ...

  4. nginx禁止指定的user_agent访问

    #禁止指定user_agent(浏览器标识)if ($http_user_agent ~ 'curl|baidu'){ return 403;} if ($http_user_agent ~* 'cu ...

  5. 【SSM】---Spring+SpringMVC+Mybatis框架整合

    参考 百度经验 https://jingyan.baidu.com/article/2a1383288a85a9074a134f1b.html CSDN http://blog.csdn.net/ge ...

  6. 原生js之addEventListener,removeEventListener

    使用addEventListener添加事件 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. #Java学习之路——基础阶段二（第十二篇）

    我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...

  8. [Vuejs] Vue解决代理设置导致浏览器Session丢失的问题

    以下是会造成Session丢失的代理: proxyTable: { '/proxyApi': { target: 'http://111.18.149.215:8080/WRSOCXSystem/ht ...

  9. sql盲注-笔记

     盲注是因为数据库查询的结果不会直接显示在页面.只能通过构造查询语句查看反馈的结果真&假状态来判断信息.   实际注入手法和回显注入区别不大 下面只记录相关思路   select length ...

  10. [转帖]Ubuntu 18.04 server安装图形界面及realvnc远程桌面连接

    Ubuntu 18.04 server安装图形界面及realvnc远程桌面连接 https://blog.csdn.net/networken/article/details/88938304 转帖 ...