一、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 ...
随机推荐
- vue问题二:vue打包时产生的问题
vue项目打包问题:vue中默认的config/index.js的配置的详细理解: 参考文档:https://blog.csdn.net/qq_34611721/article/details/809 ...
- sharesdk短信验证码的集成
在ShareSDK官网http://mob.com/注册并创建Android应用.申请APP_key,下载SDK等 根据官网开发文档导入SDK,目录结构如下 将以上文件按需放入Android Stud ...
- Nodejs 之非阻塞 I/O、异步、事件驱动
1.非阻塞 I/O var fs = require('fs'); console.log('); fs.readFile('mime.json',function (err,data) {//rea ...
- nginx禁止指定的user_agent访问
#禁止指定user_agent(浏览器标识)if ($http_user_agent ~ 'curl|baidu'){ return 403;} if ($http_user_agent ~* 'cu ...
- 【SSM】---Spring+SpringMVC+Mybatis框架整合
参考 百度经验 https://jingyan.baidu.com/article/2a1383288a85a9074a134f1b.html CSDN http://blog.csdn.net/ge ...
- 原生js之addEventListener,removeEventListener
使用addEventListener添加事件 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- #Java学习之路——基础阶段二(第十二篇)
我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...
- [Vuejs] Vue解决代理设置导致浏览器Session丢失的问题
以下是会造成Session丢失的代理: proxyTable: { '/proxyApi': { target: 'http://111.18.149.215:8080/WRSOCXSystem/ht ...
- sql盲注-笔记
盲注是因为数据库查询的结果不会直接显示在页面.只能通过构造查询语句查看反馈的结果真&假状态来判断信息. 实际注入手法和回显注入区别不大 下面只记录相关思路 select length ...
- [转帖]Ubuntu 18.04 server安装图形界面及realvnc远程桌面连接
Ubuntu 18.04 server安装图形界面及realvnc远程桌面连接 https://blog.csdn.net/networken/article/details/88938304 转帖 ...