一、Vue CLI
一、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的更多相关文章
- vue cli 3.x 项目部署到 github pages
github pages 是 github 免费为用户提供的服务,写博客,或者部署一些纯静态项目. 最近将 vue cli 3.x 初始化项目部署到 github pages,踩了一些坑,记录如下. ...
- @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件
目录 @vue/cli 3.0 使用 svg-sprite-loader 加载本地 SVG 文件 运行 使用 配置 svg-sprite-loader 调用当前环境下的颜色 props @vue/cl ...
- vue cli使用融云实现聊天
公司有个项目要实现一个聊天功能,需求如下图,略显随意 公司最终选择融云这个吊炸天的即时通信,文档详细的一匹,刚开始看文档感觉很详细实现起来也不麻烦,有很多开源的demo可以在线演示和下载 不过我们的项 ...
- Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
- Vue CLI 3使用：浏览器兼容性
package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件),指定了项目的目标浏览器的范围.这个值会被 @babel/preset-env ...
- 基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
- Vue CLI 3+tinymce 5富文本编辑器整合
基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...
- vue cli 3.0创建项目
.npm i -g @vue/cli .vue create my-project 此处有两个选择: 1.default (babel, eslint)默认套餐,提供babel和eslint支持 2. ...
- vue cli 3 lintOnSave 配置有时无效问题
一个使用vue cli 3.2创建的项目,创建时未开启 lintOnSave,后来希望开启并设置为 lintOnSave: 'error',但配置不生效. 解决方法1:新创建项目(此时vue cli ...
- VS Code引用 vue/cli
npm i @vue/cli -g 引用cli脚手架 3.0版本 下载好后 找个空文件夹 vue create myvue 创建vue项目 myvue是自己项目名称 Your connec ...
随机推荐
- windows怎么远程访问deepin linux桌面
deepin linux端安装anydesk 1.首先点击打开任务栏上的“深度商店” 2.打开后搜索anydesk. 3.点击进入后按“安装”即可,安装完成即可在“深度商店”点击“打开”运行anyde ...
- 趣谈linux操作系统笔记-从BIOS到bootloader
BIOS 在主板上,有一个东西叫ROM(Read Only Memory,只读存储器).这和咱们平常说的内存RAM(Read Access Memory,随机存取存储器)不同. 而 ROM 是只读的, ...
- 设置terminal 命令别名
vi -/.bash_profile code () { VSCODE_CWD="$PWD" open -n -b "com.microsoft.VSCode" ...
- 英特尔® Open Image Denoise 库有助于节省时间，提高质量
在使用光线跟踪增强真实性与沉浸感时,游戏开发人员面临复杂的权衡.为了克服一系列挑战,英特尔创建了使用光线跟踪进行图像渲染的一整套解决方案,包含高性能开源滤波器.该解决方案已发布测试版,被集成至 Uni ...
- TCP/IP笔记——TCP特点、首部格式、滑动窗口
这次总结一下TCP相关的知识. TCP主要特点 面向连接:在通信前必须建立连接(只是逻辑上存在,而不是物理连接) 只能有两个端点:即只能一对一通信(所以通常p2p是用UDP实现的) 提供可靠交付服务: ...
- 磊哥的密码箱icpc11526
问题 D: 磊哥的密码箱 时间限制: 1 Sec 内存限制: 128 MB提交: 238 解决: 61[提交] [状态] [命题人:admin] 题目描述 磊哥有个密码箱,里面装的都是令磊哥羞羞的 ...
- 封装jquery插件
最近要到使用别的jquery插件,但部分功能并不能满足,为满足功能,只能对插件进行修改来满足,要修改插件,先要了解插件如何封装, 明白了如何封装插件,才能更好修改插件:如何封装插件? 1.插件封装类型 ...
- SpringBoot初步介绍及安装
SpringBoot的四个核心: 自动配置: 起步依赖: 命令行界面: Actuator: SpringBoot的web起步依赖:org.springframework.boot:spring-boo ...
- 红帽学习记录[RHCE] ISCSI远程块储存
目录 iSCSI 定义 组件术语 启动器 目标 ACL 发现 IQN 登录 LUN 节点 门户 TPG 搭建一个iSCSI服务 提供一个iSCSI目标 配置iSCSI客户端 iSCSI 定义 SCSI ...
- 2019JAVA第四次实验报告
JAVA实验报告 班级 计科二班 学号 20188442 姓名 吴怡君 完成时间 2019/9/29 评分等级 实验四 类的继承 1.实验目的 掌握类的继承方法: 变量的继承和覆盖,方法的继承.重载和 ...