什么是VueCLI3
什么是VueCLI
背景介绍
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:
通过 @vue/cli 搭建交互式的项目脚手架。
通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
一个运行时依赖 (@vue/cli-service),该依赖:
可升级;
- 基于 webpack 构建,并带有合理的默认配置;
- 可以通过项目内的配置文件进行配置;
- 可以通过插件进行扩展。
- 一个丰富的官方插件集合,集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。
安装
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
Node 版本要求Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
npm install -g @vue/cli
# OR
yarn global add @vue/cli
知识剖析
新特性 Vue UI
使用 vue ui 命令打开UI界面,快速创建Vue-CLI3.0项目
点击创建项目会进来这么一个界面:
填写项目名
选择包管理器
选择初始化git仓库
我们选择手动,此时会让我们选择需要使用的库和插件,比如bebel、vuex、vue-router 等常用的库
后面根据自己的需要配置就好了。 非常的简洁!
常见问题
使用vue-cli初始化后,到底还要不要装vuex,vue-router?
解决方案
不需要,vueCLI3.0 在初始化后自动安装了vuex 和 vue-router
编码实战
略
扩展思考
如何在VueCLI3.0中使用VueCLI2.x的模板
Vue CLI 3 和旧版使用了相同的 vue 命令,所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能,你可以全局安装一个桥接
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project
更多讨论
Q1. build哪里去了?config哪里去了?配置都消失了?
A1:
vue-cli3.0默认项目目录与2.0的相比,更精简:
1.移除的配置文件根目录下的,build和config等目录,
2.移除了static文件夹,新增了public文件夹,并且index.html移动到public中。
3.在src文件夹中新增了views文件夹,用于分类 试图组件 和 公共组件 。
4.大部分配置 都集成到 vue.config.js这里,在项目根目录下
在vue.config.js里大概配置
常用的路径名、根目录、预处理、devServer配置、pwa、dll、第三方插件
vue.config.js
Q2. webpack.config.js 去哪了?
A2:
webpack的相关配置可以写入vue.config.js 内的 configureWebpack的选项下,但是如果是vue.config.js中已有的配置, 不要写入configureWebpack内。
Q3. npm run dev改了?
A3:
在根目录的package.json里有如下命令
- “serve”: “vue-cli-service serve”,
- “build”: “vue-cli-service build”,
- “lint”: “vue-cli-service lint”
所以以前那些用npm run dev的,约莫是只能npm run serve/npm run build了
当然本身是“打包了一个express之类的serve工具啥的.????”
具体是package.json里面“scripts”有写..键值..
我最近用的是npm run serve
vue-cli-service serve starts a dev server based on webpack-dev-server. It comes with hot-module-replacement (HMR) out of the box.
参考文献
Webpack4升级指北
vueCLI3.0初体验
什么是VueCLI3相关推荐
- 揭秘vue——vue-cli3全面配置
★ vue-cli3 全面配置 ★ Nuxt.js 全面配置 创建项目 配置环境变量 通过在package.json里的scripts配置项中添加--mode xxx来选择不同环境 在项目根目 ...
- vue-cli3+typescript初体验
前言 气势汹涌,ts似乎已经在来的路上,随时可能敲门. 2015年,三大前端框架开始火爆的时候,我还在抱着Backbone不放,一直觉得可以轻易转到其他框架去.后来换工作,现实把脸都打肿了,没做过vu ...
- vue-cli3.0 生产包去除console.log
目前负责的公众号又迭代了一个版本,之前打生产包,配置总是和测试包搞混,所以使用了vue-cli3.0的环境变量来控制配置. 但是又发现了一个新问题,写代码的过程中写了很多console.log 来调试 ...
- vue-cli3 第三版安装搭建项目
Vue CLI是一个用于快速Vue.js开发的完整系统 3.X较2.X结构变了很多,更优雅,开发体验更好 官方:https://cli.vuejs.org/guide/ 安装:https://cli. ...
- VUE3.0 二. vue-cli3 配置指南
VUE3.0 二. vue-cli3配置指南 一.vue.config.js 详解 官网地址: https://cli.vuejs.org/zh/config/ 使用vue3 的时候需要添加一个vue ...
- vue-cli3.0 移动端适配
方案: 固定一个某些宽度,使用一个模式,加上少许的媒体查询方案 使用flexbox解决方案 使用百分比加媒体查询 使用rem 用px2rem配合lib-flexible 关于移动端的适配,我喜欢用px ...
- vue-cli3集成typescript,sass variables,多页打包
vue-cli早期版本支持搭建时直接引入typescript,不需要自己配置 3.4.1版本ui搭建时没有自动集成typescript,所以记录下自己搭建的坑 总共三步 第一步:vue.config. ...
- vue-cli3.0配置详解
这次给大家带来vue-cli3.0配置详解,使用vue-cli3.0配置的注意事项有哪些,下面就是实战案例,一起来看一下. 新建项目 1 2 3 4 5 6 7 8 # 安装 npm install ...
- vue-cli3 一直运行 /sockjs-node/info?t= 解决方案
vue-cli3 一直运行 /sockjs-node/info?t= 解决方案 参考文章: (1)vue-cli3 一直运行 /sockjs-node/info?t= 解决方案 (2)https:// ...
- vue-cli3.0结合lib-flexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题
vue-cli3.0结合lib-flexible.px2rem实现移动端适配,完美解决第三方ui库样式变小问题 参考文章: (1)vue-cli3.0结合lib-flexible.px2rem实现移动 ...
最新文章
- 测试驱动开发是否是一种强迫症?
- .jsp与servlet之间页面跳转及参数传递实例
- 定义快捷代码_Qt Creator快捷键
- solidworks无法获得下列许可standard_无法获取下列许可solidworks standard解决方法SW实战营...
- 如何面试.NET/ASP.NET工程师?
- 前端学习(1612):oracle简介
- 微信小程序 - 用户进入客服会话会在右下角显示可能要发送的小程序提示
- Asp.net TextBox常规输入验证
- jpa mysql存储过程_(原)springbootjpa调用服务器mysql数据库的存储过程方法-Go语言中文社区...
- 360浏览器升级_社畜必备!360浏览器上线“文档”功能 一键开启云办公
- 关于sinx交换积分次序变号的问题
- 职业四象限,分分钟定位你的方向
- 如何优雅地重启go程序--endless篇
- 机器学习中的数学——Nesterov Momentum
- 怎么从扫描的PDF文档/图片里提取文字
- Java代码实现用for循环打印斐波那契数列前20项
- 【Windows7系统装什么浏览器好用】
- C++课程设计(校车订票系统)
- 关于给手机拍照出现斜条纹的问题
- java三个技术平台_java三大技术平台是什么