vue-cli 3.0 使用全过程讲解

2024-05-15 15:42:57

2018年8月13日更新：恭祝vue-cli 3.0.0 官方正式版发布，此后我们可以正式在3.0环境下进行项目开发了。

此文发布以来受到了很多朋友的阅读，但我深知这篇文章还是很浅显的，因此，我会在后续的 3.0 使用过程中分享我遇到的各种问题以及解决方案（如果能解决的话。。。）。

首先在使用

vue create my-project

创建项目的时候要选择使用 css 预处理器。

安装 vue-cli

首先使用 npm 安装 vue-cli v3.0。

npm install -g @vue/cli

安装完成后使用

vue -V

查看版本号，如果显示版本号说明安装完成。

创建项目

vue-cli v3.0 创建项目的命令与 2.0 有所不同。3.0 创建项目的命令为：

vue create test-project

创建过程中首先选择创建的模式，是采用默认配置，还是自定义配置：

通过上下箭头进行选择。window 默认 cmd 可能不支持箭头上下选择，建议下载其他 shell 工具。

建议采用 Mannual select features 自定义模式。这样可以自主选择需要的插件。

因为我之前创建过一次，所以创建了一个命名为 walle 的模板，下次创建的时候可以直接按照上次的模板进行创建。

选择自定义模式后可以自由选择想要在项目中使用的插件，用空格键选中。

如果选择了 CSS Pre-processors (CSS预处理器)，则接下来会让你选择预处理器的类型。

我选择了相对比较熟悉的 SCSS/SASS 预处理器。这样就可以在项目中使用 SCSS 语法和 SASS 语法了。关于如何在项目中使用 SCSS/SASS 请看我的另一篇博客。

接下来会让你选择 lint 的模式，也就是检测代码的规则。

选择每次保存时进行代码规则校验。

选择配置文件的集成方式，是配置在独立文件中，还是全都配置在 package.json 文件中。因为在独立文件中比较容易看，所以建议选择使用独立文件。

最后就是询问你是否将此次的配置生成一个模板，下次直接之后模板配置直接生成项目了。

确定后就开始了漫长的项目生成之旅了。（第一次使用 vue-cli 进行项目生成可能会卡主，一直不动，这时候按一下 enter 键项目就能继续生成了）

vue-cli 3.0 使用全过程讲解相关推荐

Vue CLI 3.0脚手架如何在本地配置mock数据
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
vue/cli 3.0 与 2.0脚手架怎样mock数据
vue/cli 3.0 与 2.0脚手架怎样mock数据 3.0 移除了 static 文件目次,新增了 public 目次,这个目次下的静态资本不会经由 webpack 的处置惩罚,会被直接拷贝,所 ...
Vue CLI 3.0脚手架如何在本地配置mock数据json
前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或 ...
专访Vue作者尤雨溪：Vue CLI 3.0重构的原因
1.为什么要对 Vue CLI 进行大规模修改? 尤雨溪认为旧版本的 Vue CLI 本质上只是从 GitHub 拉取模版,这种拉模版的方式有几个问题: (1) 在单个模版里面同时支持太多选项会导致模 ...
Vue CLI 3.0正式发布！
web前端教程用大白话,来讲编程网友们纷纷点赞,也有网友调侃学不动了! 尤雨溪表示,Vue CLI 3.0 与其他的版本完全不同,它经历了重构,目的是: 1.尽可能减少现代前端工具在配置上的烦恼, ...
如何使用@vue/cli 3.0在npm上创建，发布和使用你自己的Vue.js组件库
译者按: 你可能npm人家的包过成千上万次,但你是否有创建,发布和使用过自己的npm包? 原文: How to create, publish and use your own VueJS Compo ...
@vue/cli 3.0 eslint 转成tslint
我们用 vue/cli 创建新项目的时候,通常会选择代码检查工具 [eslint|tslint],有的时候难免会选错,这个时候想要替换,怎么办场景再现 vue create lint-vue 为了方 ...
Vue CLI 3.0 正式发布，Vue.js 开发标准化工具
Vue CLI 3.0 已发布,该版本经历了重构,旨在: 减少现代前端工具的配置烦扰,尤其是在将多个工具混合在一起使用时: 尽可能在工具链中加入最佳实践,让它成为任意 Vue 应用程序的默认实践. V ...
Vue Cli 3.0打包生成app
1.vue cli 3.0创建新工程,添加依赖mint-ui 2.项目配置中,公共路径设置为./,(注意,这一步非常重要,否则打包后项目找不到项目中文件) 修改保存后,可以看到vue.confi ...
基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...

最新文章

热门文章