一、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. 从curl命令获取libcurl的用法

    libcurl的用法参数太多 有时候弄不好 可以先用curl命令实现了 然后获取相应的libcurl代码 比如要上传文件 curl -T d:/h.txt http://demo.xudp.cn/up ...

  2. JNI崩溃调试

    JNI崩溃了,系统日志会打印堆栈信息,所以第一步就是取日志 adb shell logcat -v threadtime >>d:/log.txt 然后找到日志里面的关键字backtrac ...

  3. SQL Server高可用实现方案

    名词解释: WSFC:Windows Server Failover Cluster,在Windows Server操作系统上,由WSFC提供高可用性.故障检测和SQL Server AlwaysOn ...

  4. shell命令find删除修改后带尾巴的重复的文件

    命令:find . -name "*~" -delete 说明:在linux中 点号(.)表示当前目录,连续的连个点号(..)表示父级目录 作用:在linux中,我经常会遇到这样的 ...

  5. 分期花呗 账户交易通知：尾号6932客户，您的申请已通过，账户余额38139元，无手续费，点t.cn/Aijsx9vq取款，回T退订。

    10692285499 分期花呗 账户变动通知:尾号6932客户,您的申请已通过,账户余额5000元,请及时点击t.cn/AiOMsNAm取款,回T退订. 106935276259002分期花呗 账户 ...

  6. 如何将txt文件转换为带章节目录的mobi文件

    txt文件基本没什么排版可言.所以想要把txt转换为mobi文件方便阅读. 具体步骤如下: 打开txt 用notepad++打开所需要转换的txt文件.(或者使用其他的能够支持正则表达式的编辑器). ...

  7. vtkTestHull将多个平面围成一个凸面体

    1.vtkHull produce an n-sided convex hull vtkHull is a filter which will produce an n-sided convex hu ...

  8. 关于Anaconda3 (64-bit)的一些体验

    最近因为在学习数据分析,所以安装了Anaconda3 (64-bit),最新版,支持py3.7 优点:自带了720个库(官方宣布),自带notebook,spyder.不用自己再去pip各种库了(基本 ...

  9. USACO3.3 A Game【区间dp】

    这道题也是一道非常有意思的区间$dp$,和在纪中的这道题有点像:取数游戏 (除了取数规则其它好像都一样诶) 当时在纪中的时候就觉得这个$dp$非常不好想,状态定义都不是很容易想到. 但是做过一道这种题 ...

  10. 【VS开发】【图像处理】自动白平衡(AWB)算法---色温曲线

    原文地址:http://blog.csdn.net/wzwxiaozheng/article/details/38434391 白平衡算法---色温曲线 本文大体讲解了白平衡的算法流程,适用于想了解和 ...