Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目
Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/
一、安装 @vue/cli
更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vue/cli
如果之前全局安装了旧版本的 vue-cli (1.x 或 2.x),首先需要使用以下命令卸载掉
// 如果没有安装旧版本的 vue-cli 可以跳过卸载直接安装
npm uninstall vue-cli -g
# OR
yarn global remove vue-cli
然后重新安装新版本的 @vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装完成后,可以使用 vue -V (这个 V 是大写的)查看版本号
二、创建项目的三种方式
1.x 和 2.x 的的 vue-cli 采用 init 命令创建项目
vue init webpack project-name
3.x 也支持这种方式,其运行结果和以前一样,详情可以参考《Vue 爬坑之路(一)》
但刚入行的前端萌新可能还不习惯命令行的构建方式
于是 vue/cli 3.x 新增了图形化的方式来创建项目
首先还是得在指定目录下打开终端,然后运行:
vue ui
然后浏览器会打开一个页面,可以按照页面将的引导创建项目
不过我还是建议使用命令行工具,这才符合一个程序员的身份嘛
vue create project-name
这里的 project-name 是自定义的项目名称,命令执行之后,会生成对应文件夹
三、参数详解
使用 create 命令创建项目的时候,有很多配置项需要选择
如果对某项配置项不熟悉,可以直接选择第一个选项
首先需要选择模块
如果选择默认选项 default,将会构建一个最基本的 vue 项目(没有 vue-router 也没有 vuex)
这里推荐选择第二项 Manually select features
然后根据自己的需求,使用空格键选择具体的模块
如果不熟悉上面的模块分别代表什么,可以先按照上图的示意勾选模块
这样就会创建一个包含 vue-router、vuex 和 postcss 的项目
关于 vue-router 和 vuex 可以参考我之前的博客:
《Vue 爬坑之路(三)—— 使用 vue-router 跳转页面》
勾选之后,使用回车键进入下一步
这里需要选择路由模式,yes 是 history 模式,no 是 hash 模式
萌新可以先从 hash 模式入手,不过实际项目通常采用 history 模式
然后选择一个合适 CSS 的预编译工具
都不熟悉的话就选 sass 或者 less,因为 stylus 不支持原生 CSS 写法
后面还需要选择 ESLint 的校验规则,格式化的时机,和各个插件的配置项的位置,不熟悉的话就选第一个
然后就有了这样的过程:
最后选择是否将配置项保存为预设,然后配置完成,开始生成项目
项目生成之后,已经自动安装了相关的依赖项,这时候可以直接启动项目:
npm run serve
四、vue.config.js
完成以上步骤之后,就已经可以开发 vue 项目了,但无法满足定制化的开发需求
这时候就需要手动创建一个 vue.config.js,官方的配置文档可以参考这里
这里我贴一个常用的 vue.config.js
// vue.config.js
module.exports = {
baseUrl: '/',
outputDir: 'dist', // 打包的目录
lintOnSave: true, // 在保存时校验格式
productionSourceMap: false, // 生产环境是否生成 SourceMap
devServer: {
open: true, // 启动服务后是否打开浏览器
host: '0.0.0.0',
port: 8080, // 服务端口
https: false,
hotOnly: false,
proxy: null, // 设置代理
before: app => {}
},
}
vue.config.js 还有很多很厉害的配置项
比如构建多页面应用的 pages、改造为 pwa 的配置项 pwa、高级 CSS 打包方案 css
这里就不细说了,如果有兴趣可以仔细研究官方文档
五、环境变量
有过一定开发经验的小伙伴都知道,一个项目通常有三种模式:
开发模式 development、测试模式 test、生产模式 production
而开发中通常会根据环境变量 NODE_ENV 来进行区分这三种开发模式
然后通过很多的 switch... case 来判断
而 3.x 的项目中就不需要写 switch...case 了
直接在根目录下创建以 .env 为前缀的文件
这里的 .env 文件保存的是公用参数,可以在所有模式中获取到
而其他文件中的参数,只能在对应模式中获取到
比如 .env.development 中的参数,就只有在 development 模式下生效
然后在文件内添加对应的键值对
然后在 package.json 的 scripts 命令中添加对应的 mode
// serve、bulid 都有默认的模式,但最好是将模式显式的展现在配置项中
然后就能在项目中获取到对应模式下的值
关于环境变量和模式的详情,可以参考官方文档
Vue 爬坑之路(十二)—— vue-cli 3.x 搭建项目的更多相关文章
- Vue 爬坑之路(二)—— 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
- (转)Vue 爬坑之路(二)—— 组件之间的数据传递
Vue 的组件作用域都是孤立的,不允许在子组件的模板内直接引用父组件的数据.必须使用特定的方法才能实现组件之间的数据传递. 首先用 vue-cli 创建一个项目,其中 App.vue 是父组件,com ...
- Vue 爬坑之路(九)—— 用正确的姿势封装组件
迄今为止做的最大的 Vue 项目终于提交测试,天天加班的日子终于告一段落... 在开发过程中,结合 Vue 组件化的特性,开发通用组件是很基础且重要的工作 通用组件必须具备高性能.低耦合的特性 为了满 ...
- Vue 爬坑之路(一)—— 使用 vue-cli 搭建项目
vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli vue ...
- Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
- Vue 爬坑之路(三)—— 使用 vue-router 跳转页面
使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vue ...
- Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)
直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...
- (转)Vue 爬坑之路(三)—— 使用 vue-router 跳转页面
使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生. 官方文档: https://router.vue ...
- Vue 爬坑之路(十)—— Vue2.5 + Typescript 构建项目
Typescript 在前端圈已经逐渐普及,Vue 2.5.0 改进了类型声明,使得对 TypeScript 更加友好 不过要想在项目中直接使用 TypeScript 仍然需要对项目进行一些改造 P ...
随机推荐
- JS应用实例2:轮播图
在学习轮播图之前,要先会切换图片: 找三张图片,命名1.jpg,2.jpg,3.jpg 示例: <!DOCTYPE html> <html> <head> < ...
- php使用curl模拟登录带验证码的网站[开发篇]
需求是这样的,需要登录带验证码的网站,获取数据,但是不可能人为一直去记录数据,想通过自动采集的方式进行,如下是试验出来的结果代码!有需要的可以参考下! <?php namespace Home\ ...
- 前后端分离开发之前端自己的API(DB)---- (1)
Creating demo APIs for Front-End Developer 心理准备 Tool-1 开发工具/编辑器:Visual Studio Code , 即 VSCode官网: htt ...
- spring boot -thymeleaf-遍历list和map
遍历 list如下 th:each th:each 状态变量 var 遍历map如下(需要双层遍历) controller代码如下
- Django--Session 操作
Session Session的由来 Cookie虽然在一定程度上解决了“保持状态”的需求,但是由于Cookie本身最大支持4096字节,以及Cookie本身保存在客户端,可能被拦截或窃取,因此就需要 ...
- 剖析QMenu & Qt完全定制化菜单
贴张效果图: 定制包括: 1. 周边阴影 2. 菜单项的元素(分割符, 控制ICON大小, 文字显示位置与颜色, 子菜单指示符) 菜单内的效果, 部分可以使用stylesheet实现, 但要做到这样 ...
- IdentityServer Token验证
查看源码:https://github.com/IdentityServer/IdentityServer4/tree/release API使用Client Credentials的token验证是 ...
- Android生成自定义二维码
前面说过两种二维码扫描方式,现在说如何生成自定义酷炫二维码.二维码生成需要使用Google开源库Zxing,Zxing的项目地址:https://github.com/ZBar/ZBar,我们只需要里 ...
- 基于Flume的日志收集系统方案参考
前言 本文将简单介绍两种基于Flume的日志收集系统可能的架构方案,可根据不同的实际场景参考使用. 方案一 示例图如下: 说明: 每个日志源(http上报.日志文件等)对应一个Agent-c用于收集对 ...
- Linux_CentOS-服务器搭建 <七>
设置Linux下Mysql表名不区分大小写 对linux安装mysql不熟悉的(查看我那一系列的文章第一篇): http://www.cnblogs.com/Alandre/p/3365535.htm ...