vue从入门到精通之进阶篇(五)脚手架vue-cli

vue-cli2.x脚手架的使用

参考链接:https://github.com/vuejs/vue-cli/tree/v2#vue-cli--

安装:

npm install -g vue-cli

用法:

$ vue init < template-name >  < project-name >

例:

$ vue init webpack my-project

目前可用的模块包括:

  • webpack - 一个功能齐全的Webpack + vue-loader设置,具有热重载,linting,测试和css提取功能。
  • webpack-simple - 一个简单的Webpack + vue-loader设置,用于快速原型设计。
  • browserify -全功能Browserify + vueify设置用热重装载,linting&单元测试。
  • browserify -simple - 一个简单的Browserify + vueify设置,用于快速原型设计。
  • pwa - 基于webpack模板的vue-cli的PWA模板
  • simple - 单个HTML文件中最简单的Vue设置

相关文件和文件夹的含义:
在这里插入图片描述

build: 里面是对webpack开发和打包的相关配置,包括入口文件、输出文件和使用的模块等

config: 主要是指定开发和打包中的静态资源,要压缩的文件类型,开发使用的端口号,开发使用的虚拟服务器跨域请求api等

.babelrc:使用babel的配置文件,用来设置转码和插件

.editorconfig:代码的规范文件,规定使用的空格或者tab缩进,缩进的长度以及代码风格,使用时需要在编辑器中下载插件

.gitignore:使用git的忽略文件,git操作不会对其产生作用

.postcssrc.js:指定使用的css预编译器

index.html: 首页文件,项目运行是,会自动将我们src文件夹里生成的组件插入这个文件里

package-lock.json:当node-module或package.json发生变化时自动生成的文件,这个文件主要功能是确定当前安装的包的依赖,以便后续安装的时候生成相同的依赖, 而更新项目开发过程中有些依赖已经发生的更新

package.json:指定项目开发和生成环境中需要使用的依赖库

README.md:备注文件,项目开发过程中的需要注意的地方进行一些说明

vue-cli3x脚手架的使用

vue-cli3x的官方文档:https://cli.vuejs.org/

Vue-cli3 中vue.config.js文件配置参考文档:https://cli.vuejs.org/zh/config/#integrity

// vue.config.js 配置说明
//官方vue.config.js 参考文档 https://cli.vuejs.org/zh/config/#css-loaderoptions
// 这里只列一部分,具体配置参考文档
module.exports = {// 部署生产环境和开发环境下的URL。// 默认情况下,Vue CLI 会假设你的应用是被部署在一个域名的根路径上//例如 https://www.my-app.com/。如果应用被部署在一个子路径上,你就需要用这个选项指定这个子路径。例如,如果你的应用被部署在 https://www.my-app.com/my-app/,则设置 baseUrl 为 /my-app/。baseUrl: process.env.NODE_ENV === "production" ? "./" : "/",// outputDir: 在npm run build 或 yarn build 时 ,生成文件的目录名称(要和baseUrl的生产环境路径一致)outputDir: "dist",//用于放置生成的静态资源 (js、css、img、fonts) 的;(项目打包之后,静态资源会放在这个文件夹下)assetsDir: "assets",//指定生成的 index.html 的输出路径  (打包之后,改变系统默认的index.html的文件名)// indexPath: "myIndex.html",//默认情况下,生成的静态资源在它们的文件名中包含了 hash 以便更好的控制缓存。你可以通过将这个选项设为 false 来关闭文件名哈希。(false的时候就是让原来的文件名不改变)filenameHashing: false,//   lintOnSave:{ type:Boolean default:true } 问你是否使用eslintlintOnSave: true,//如果你想要在生产构建时禁用 eslint-loader,你可以用如下配置// lintOnSave: process.env.NODE_ENV !== 'production',//是否使用包含运行时编译器的 Vue 构建版本。设置为 true 后你就可以在 Vue 组件中使用 template 选项了,但是这会让你的应用额外增加 10kb 左右。(默认false)// runtimeCompiler: false,/*** 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。*  打包之后发现map文件过大,项目文件体积很大,设置为false就可以不输出map文件*  map文件的作用在于:项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。*  有了map就可以像未加密的代码一样,准确的输出是哪一行哪一列有错。* */productionSourceMap: false,// 它支持webPack-dev-server的所有选项devServer: {host: "localhost",port: 1111, // 端口号https: false, // https:{type:Boolean}open: true, //配置自动启动浏览器// proxy: 'http://localhost:4000' // 配置跨域处理,只有一个代理// 配置多个代理proxy: {"/api": {target: "<url>",ws: true,changeOrigin: true},"/foo": {target: "<other_url>"}}}
};

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/249248.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ES6 数值的扩展

ES6 规范了二进制和八进制的表示方法&#xff0c;代码如下&#xff1a; console.log(0o2000 1024) //true 使用0o表示八进制 0是数字0 o是小写字母oconsole.log(0b10000000000 1024) //true 使用0b表示二进制 0是数字…

树的定义

https://www.cnblogs.com/jpfss/p/10842521.html

【Java】 剑指offer(27) 二叉树的镜像

本文参考自《剑指offer》一书&#xff0c;代码采用Java语言。 更多&#xff1a;《剑指Offer》Java实现合集 题目  请完成一个函数&#xff0c;输入一个二叉树&#xff0c;该函数输出它的镜像。 思路 画图可以很清晰地得到思路&#xff1a;先前序遍历&#xff0c;对每个结点交…

vue从入门到精通之进阶篇(一)vue-router:导航守卫

vue-router的导航守卫之在导航完成后获取数据 需求&#xff1a;在导航完成之后加载数据。渲染DOM <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title></title> </head> <body><di…

Unity 新手入门 如何理解协程 IEnumerator yield

Unity 新手入门 如何理解协程 IEnumerator 本文包含两个部分&#xff0c;前半部分是通俗解释一下Unity中的协程&#xff0c;后半部分讲讲C#的IEnumerator迭代器 协程是什么&#xff0c;能干什么&#xff1f; 为了能通俗的解释&#xff0c;我们先用一个简单的例子来看看协程可以…

百万级数据库优化方案

一、百万级数据库优化方案 1.对查询进行优化&#xff0c;要尽量避免全表扫描&#xff0c;首先应考虑在 where 及 order by 涉及的列上建立索引。 2.应尽量避免在 where 子句中对字段进行 null 值判断&#xff0c;否则将导致引擎放弃使用索引而进行全表扫描&#xff0c;如&#…

vue从入门到精通之进阶篇(二)组件通信:兄弟组件通信

$emit和$on进行组件之间的传值 注意&#xff1a;emit和emit和emit和on的事件必须在一个公共的实例上&#xff0c;才能够触发 需求&#xff1a; ​ 1.有A&#xff0c;B&#xff0c;C三个组件&#xff0c;同时挂载到入口组件中 ​ 2.将A组件中的数据传递到C组件&#xff0c;再将…

树结构的性质

非空树的结点总数等于树种所有结点的度之和加 1度为 K 的非空树的第 i 层最多有 ki-1 个结点(i > 1)深度为 h 的 k 叉树最多有(kh - 1)/(k - 1)个结点具有 n 个结点的 k 叉树的最小深度为 logk(n(k-1)1))

EM算法 小结

猴子吃果冻 博客园首页新随笔联系管理订阅随笔- 35 文章- 0 评论- 3 4-EM算法原理及利用EM求解GMM参数过程 1.极大似然估计 原理&#xff1a;假设在一个罐子中放着许多白球和黑球&#xff0c;并假定已经知道两种球的数目之比为1:3但是不知道那种颜色的球多。如果用放回抽样方…

Vue UI 框架对比 element VS iview

element VS iview (最近项目UI框架在选型 &#xff0c;做了个分析&#xff0c; 不带有任何利益相关&#xff09; 主要从以下几个方面来做对比 使用率&#xff08;npm 平均下载频率&#xff0c;组件数量&#xff0c;star, issue…) API风格 打包优化 与设计师友好性 1&a…

SPSS-回归分析

回归分析&#xff08;一元线性回归分析、多元线性回归分析、非线性回归分析、曲线估计、时间序列的曲线估计、含虚拟自变量的回归分析以及逻辑回归分析&#xff09; 回归分析中&#xff0c;一般首先绘制自变量和因变量间的散点图&#xff0c;然后通过数据在散点图中的分布特点选…

Python教程:Python中的for 语句

Python 中的 for 语句与你在 C 或 Pascal 中可能用到的有所不同。 Python教程 中的 for 语句并不总是对算术递增的数值进行迭代&#xff08;如同 Pascal&#xff09;&#xff0c;或是给予用户定义迭代步骤和暂停条件的能力&#xff08;如同 C&#xff09;&#xff0c;而是对任意…

二叉树的基本性质及证明

性质1&#xff1a;一棵非空二叉树的第i层上最多有2^(i-1)个结点&#xff0c;&#xff08;i>1&#xff09;。 性质2&#xff1a;一棵深度为k的二叉树中&#xff0c;最多具有2^k-1个结点&#xff0c;最少有k个结点。 性质3&#xff1a;对于一棵非空的二叉树&#xff0c;度为…

ACM10.14题解

ACM10.14题解 第一次打周赛&#xff0c;感觉还是比较紧张的&#xff0c;应该开完所有的题再做&#xff0c;而不是硬做&#xff0c;没必要硬杠英语&#xff0c;还是不要抱有侥幸心理&#xff0c;做对一定是完全理解且会&#xff0c;自己小心边界问题&#xff0c;不要瞎交。 A&am…

vscode: Visual Studio Code 常用快捷键

原文章地址&#xff1a; vscode: Visual Studio Code 常用快捷键 官方快捷键说明&#xff1a;Key Bindings for Visual Studio Code 主命令框 F1 或 CtrlShiftP: 打开命令面板。在打开的输入框内&#xff0c;可以输入任何命令&#xff0c;例如&#xff1a; 按一下 Backspace…

HTML5概要与新增标签

一、HTML5概要 1.1、为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要&#xff0c;特别是移动互联网。为了增强浏览器功能Flash被广泛使用&#xff0c;但安全与稳定堪忧&#xff0c;不适合在移动端使用&#xff08;耗电、触摸、不开放&#xff09;。 HTML5增强了浏览器的…

Tomcat启动失败错误解决Could not publish server configuration for Tomcat v8.0 Server at localhost....

这个问题本质是我们有多个重名项目&#xff0c;为什么我们会有多个重名项目&#xff0c;其实一般都是我们删除以前的项目&#xff0c;然后再把它重新导进eclipse时以前的项目删除不彻底造成的&#xff0c;以前的项目在"Servers"里面的"server.xml"文件下的…

二叉树特性及证明

https://blog.csdn.net/jun2016425/article/details/54581407

Mock.js 和Node.js详细讲解

​​​​原文地址&#xff1a;http://www.manongjc.com/article/10503.html 《一统江湖的大前端》系列是自己的前端学习笔记&#xff0c;旨在介绍javascript在非网页开发领域的应用案例和发现各类好玩的js库&#xff0c;不定期更新。如果你对前端的理解还是写写页面绑绑事件&am…

架构图

负载均衡 分布式 转载于:https://www.cnblogs.com/jiqing9006/p/10672280.html