初探vue-cli 3.0

superPershing 发布于2019-08-23 12:23 / 2976人阅读

摘要：当你将一系列的特性选择完毕后最后回提示你是否将已选项保存成一个快速将来可复用的当你选择保存时，被保存的将会存在用户的目录下一个名为的文件里。

准备工作

npm install -g @vue/cli or yarn global add @vue/cli

安装需要Node.js8.9以上版本，安装完成后可以通过vue --version来验证是否安装成功

项目创建 vue create

可以通过在命令中输入vue create demo 命令直接创建一个项目，你将会被提示选取一个preset

你可以选择默认的只包含Babel + ESLint设置的preset，也可以手动选择项目中需要集成的特性

如图所示，包含babel转码，ts编写vue,vue-router路由，vuex状态管理，css预处理，eslint代码格式管理，单元测试。
当你将一系列的特性选择完毕后最后回提示你是否将已选项保存成一个快速将来可复用的preset

当你选择保存时，被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 选项，可以编辑这个文件
同时，在下次再次vue create创建项目时，这已保存的preset将会成为一个选项，可以依据之前设定的特性快速生成项目，后面会详细介绍preset作用

ui界面创建

vue-cli 3.0提供了图形界面来管理项目，同时也可以通过图形界面创建项目，在命令行中输入 vue ui 即可进入项目管理界面：

preset作用及配置 preset作用

vue create 命令有一些可配置的选项

  -p, --preset        忽略提示符并使用已保存的或远程的预设选项
  -d, --default                   忽略提示符并使用默认预设选项
  -i, --inlinePreset        忽略提示符并使用内联的 JSON 字符串预设选项
  -m, --packageManager   在安装依赖时使用指定的 npm 客户端
  -r, --registry             在安装依赖时使用指定的 npm registry (仅用于 npm 客户端)
  -g, --git [message]             强制 / 跳过 git 初始化，并可选的指定初始化提交信息
  -n, --no-git                    跳过 git 初始化
  -f, --force                     覆写目标目录可能存在的配置
  -c, --clone                     使用 git clone 获取远程预设选项
  -x, --proxy                     使用指定的代理创建项目
  -b, --bare                      创建项目时省略默认组件中的新手指导信息
  -h, --help                      输出使用帮助信息

其中通过vue create -p 可以使用已保存的或远程的预设选项，一种是之前手选特性时自己保存在本地的preset，还有一种远程代码仓库上的，可以是GitHub、GitLab或者BitBucket

vue create --preset username/repo my-project
vue create --preset gitlab:username/repo --clone my-project
vue create --preset bitbucket:username/repo --clone my-project

远程代码仓库上的preset必须包含以下文件：

preset.json: 包含 preset 数据的主要文件

generator.js: 一个可以注入或是修改项目中文件的 Generator

prompts.js 一个可以通过命令行对话为 generator 收集选项的 prompts 文件

preset配置

{
  "packageManager": "npm", // 包管理工具 可以是npm或者yarn
  "useTaobaoRegistry": true, // 是否使用淘宝源
  "presets": {
    "vuePresets": {
      "useConfigFiles": true, // 是否生成多带带的配置文件
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-pwa": {},
        "@vue/cli-plugin-eslint": { //eslint配置
          "config": "standard", // eslint规则
          "lintOn": [
            "save" // 在保存是校验eslint规则
          ]
        },
        "@vue/cli-plugin-unit-jest": {},
        "@vue/cli-plugin-e2e-nightwatch": {}
      },
      "router": true,
      "routerHistoryMode": true,
      "vuex": true,
      "cssPreprocessor": "sass"
    }
  }
}

以上是简单preset配置，没有包含configs字段，如果该项存在并包含 vue 字段，会在项目根目录生成 vue.config.js 文件，用作整个项目的配置文件，vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载.

环境变量

vue cli2.0的环境变量都是通过webpack.DefinePlugin将process.env嵌入到客户端中,但是在3.0中是根据项目根目录中的文件来指定环境变量

.env                # 在所有的环境中被载入
.env.local          # 在所有的环境中被载入，但会被 git 忽略
.env.[mode]         # 只在指定的模式中被载入
.env.[mode].local   # 只在指定的模式中被载入，但会被 git 忽略

在编译时通过传递 --mode 选项参数为命令行覆写默认的模式，决定编译时加载对应文件的环境变量，如果你想要在构建命令中使用开发环境变量，请在你的 package.json 脚本中加入：

"dev-build": "vue-cli-service build --mode development",

idc机房托管云服务器 vue-cli vue-cli3 初探webrtc webrtc技术初探

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98414.html

vue-cli2.0转3.0之项目搭建

摘要：因为项目技术架构需要，要用进行搭建，所以简单的分享下如何优雅的开始。第三步创建项目相对，创建就不是之前一大堆了。直接，是项目名字。但是个人建议，进行多选，根据自己需要进行选择。根据提示，运行一把一下，跑起来的感觉很棒。因为项目技术架构需要，要用vue-cli 3.0进行搭建，所以简单的分享下3.0如何优雅的开始。下面做一下简单的介绍，希望可以帮到有需要的朋友。 vue-cli 3.0...

Zhuxy 2019-08-23 13:59 评论0 收藏0
vue-cli2.0转3.0之项目搭建

摘要：因为项目技术架构需要，要用进行搭建，所以简单的分享下如何优雅的开始。第三步创建项目相对，创建就不是之前一大堆了。直接，是项目名字。但是个人建议，进行多选，根据自己需要进行选择。根据提示，运行一把一下，跑起来的感觉很棒。因为项目技术架构需要，要用vue-cli 3.0进行搭建，所以简单的分享下3.0如何优雅的开始。下面做一下简单的介绍，希望可以帮到有需要的朋友。 vue-cli 3.0...

cikenerd 2019-08-05 15:42 评论0 收藏0
记vue-cli@3.0和之前版本的差异

摘要：记使用方式和之前版本的差异的使用下载和安装项目生成的目录结构以上，目前版本的使用下载和安装项目生成的目录结构新的目录结构，隐藏了配置文件，封装了细节对比个区别区别下载包的包命变化。貌似是之前的版本有点问题记vue-cli@3.0使用方式和之前版本的差异 @2.9.3的使用 1.下载vue-cli和安装项目 cnpm i -g vue-cli#2.9.3 vue init webpa...

wow_worktile 2019-08-22 18:15 评论0 收藏0
vue-cli 3.0 源码分析

摘要：写在前面其实最开始不是特意来研究的源码，只是想了解下的命令，如果想要了解命令的话，那么绕不开写的。通过分析发现与相比，变化太大了，通过引入插件系统，可以让开发者利用其暴露的对项目进行扩展。 showImg(https://segmentfault.com/img/bVboijb?w=1600&h=1094); 写在前面其实最开始不是特意来研究 vue-cli 的源码，只是想了解下 n...

yiliang 2019-08-23 15:11 评论0 收藏0
vue-cli 3.0

摘要：配置环境变量参考打包后项目的启动发生了变化，之前可以直接打开，现在需要参数的意思是将其架设在模式下这个模式会处理即将提到的路由问题 (第一章)学习vue-cli 3.0脚手架构建vue项目 vue学习巩固及遇到的问题首先这次使用的vue脚手架为vue-cli 3.0，它跟之前的脚手架改变了很多，这里我也没去细细的研究，也只懂得了最基本的用法，参考: vue-cli 3 地址：http...

April 2019-08-23 11:36 评论0 收藏0