一、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. debug1: Could not open authorized keys

    ssh登录的时候一直日志一直出现debug1: Could not open authorized keys登录不上,检查文件夹权限都正常用这条命令解决了 restorecon -FRvv /home ...

  2. NOIP考前知识点整理

    前言:距离NOIP还有不到一百天(虽然NOIP没了),为了整理一下所学的内容,才有了这篇博文.本文内容无特殊说明全部来自于博主的博客,代码也都是新敲的,努力在个人的码风基础上做到尽量简洁,求资瓷. 一 ...

  3. bat脚本延时启动exe和bat文件

    @echo off ping >nul start D:\exe\a.exe start "C:\Program Files\维护工具\卸载清除一键清理系统垃圾文件.bat" ...

  4. Web05_jQuery

    在官方网站下载包,下载不带有min的包 http://jquery.com/download/ 案例一:使用JQ完成首页定时弹出广告图片 01_JQ入门 01_jQuery入门.html <!D ...

  5. python3下import MySQLdb出错问题

    原因:python2下是使用的MySQLdb,python3下用的是pymysql 安装 pip install pymysql

  6. spring cloud依赖服务调用优化

    1.请求缓存 优点: 注解方式实现: 设置缓存key: 如果可以确认,对要缓存的数据的操作,主要是写操作都只在feign调用中完成且读多写少,则可以使用此方式:如果在其他地方还有对数据的写操作,则可能 ...

  7. python 爬取动态数据

    按照:https://dryscrape.readthedocs.io/en/latest/installation.html 安装dryscrape 以下是简单实现 import dryscrape ...

  8. Action Script 3.0入门基本概念——IDE&编译与运行

    [编写ActionScript代码的工具] ActionScript代码是用纯文本编写的,所以ActionScript程序可以仅由简单的文本编辑器来创建,如Windows上的记事本或Macintosh ...

  9. 【HANA系列】SAP ECLIPSE中创建ABAP项目的步骤

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP ECLIPSE中创建AB ...

  10. Java的前后端需要了解些什么？

    一.Java概念 Java具有简单性.面向对象.分布式.健壮性.安全性.平台独立与可移植性.多线程.动态性等特点.Java可以编写桌面应用程序.Web应用程序.分布式系统和嵌入式系统应用程序等. Ja ...