Vue CLI3에 대한 심층 분석

Vue CLI는 Vue.js 프로젝트를 구축하기 위한 간단하고 강력한 도구입니다. 다양한 빌드 도구가 합리적인 기본 설정으로 원활하게 실행되도록 보장하므로 구성과 씨름하는 데 시간을 낭비하는 대신 애플리케이션 작성에 집중할 수 있습니다.

Vue CLI 3은 지금까지 Vue 생태계에서 일어난 최고의 일이며 그 이유는 다음과 같습니다.

1 플러그인 기반 아키텍처

새로운 CLI는 플러그인 기반 아키텍처라고 부르는 것을 구현합니다. 이는 템플릿 기반 아키텍처를 사용했던 이전 버전에 비해 크게 개선되었습니다.

즉, 이제 하나의 템플릿만 있고 필요한 다른 모든 기능은 플러그인으로 추가된다는 의미입니다.

2. 유연성

새로운 CLI를 사용하면 향후 필요할 수 있는 모든 기능에 대해 생각할 필요 없이 새 프로젝트를 매우 쉽게 시작할 수 있습니다.

프로젝트를 생성하고 직접 코드를 작성한 다음 기능이 필요할 때 추가하면 됩니다!

3. Zero-config rapid prototyping

이런 방식으로 HTML 파일을 처리하는 것처럼 vue 애플리케이션이나 구성 요소를 제공할 수 있습니다.

4, Vuex

새로운 CLI를 사용하면 이전 버전에서 vue router를 추가한 것처럼 프로젝트에 vuex를 추가할 수 있습니다.

5. Typescript

이제 공식 cli는 부트스트래핑 typescript vue.js 애플리케이션을 지원합니다

6. CLI 공식 플러그인이 충분히 완성되지 않은 경우 다음을 수행할 수 있습니다. 나만의 맞춤형 플러그인을 생성하세요(물론 다른 사람들이 사용할 수 있도록 플러그인을 게시하세요).

Vue CLI 3 설치

CLI를 설치하려면 다음 코드를 실행하세요.

npm install -g @vue/cli

최신 버전의 Vue CLI가 설치됩니다. 완료되면 다음 명령을 실행하여 설치된 버전을 확인할 수 있습니다.

vue -V

변경된 CLI 명령

CLI 명령이 이전 버전에 비해 약간 변경되었으며 새로운 명령이 goodies pack에 추가되었습니다.

vue create myprojectmyproject라는 새 프로젝트를 만듭니다.

• vue Serve <filename>구성 없이 개발 모드에서 .js 또는 .vue 파일을 제공합니다. vue create myproject创建一个名为myproject的新项目。

• vue serve <文件名>以零配置在开发模式下提供.js或.vue文件。

• vue build <文件名>使用零配置从.js或.vue文件构建生产就绪的捆绑包。

• vue invoke <pluginname>调用已安装的插件生成器以创建插件正常工作所需的文件。

• vue inspect会显示应用程序的webpack配置，因为它已被完全抽象。

• Vue init是为仍希望使用旧版本2的用户保留的，但要使用此命令，您必须安装一个全局网桥

为此，请在终端中运行以下代码。

npm install -g @vue/cli-init

安装完成后。 现在，您随时可以在版本3中直接开始使用版本2。

vue init webpack newapp

创建一个新项目

要创建一个新项目，请在您的终端中运行以下代码

vue create projectname

其中projectname是要创建的应用程序的名称。

系统将提示您选择一个预设，默认预设（包含babel＆eslint配置）或手动选择所需的功能。

如果选择默认预设，则CLI将创建您的项目并安装必要的插件以使其启动并运行。

如果您选择手动选择功能，则CLI会继续向您显示所有受支持的插件，并要求您选择要添加到项目中的插件。

若要选择，请使用键盘上的空格键或A键选择所有插件。

完成后，按Enter键继续。

根据选择的插件的不同，还会显示其他提示，只需选择所需的内容，然后按Enter键，然后让CLI完成即可。

新的CLI的一项很酷的功能是，创建的项目还会自动在计算机上为您的项目创建一个新的存储库。

插件支持开箱即用

1. Typescript @vue/typescript

2. 渐进式Web应用程序（PWA）@vue/pwa

3. Vue Router

4. Vuex

5. CSS预处理器（postcss，css模块，sass，less和stylus）

6. Linter / Formatters @vue/eslint

7. 单元测试 @ vue / mocha或@ vue / jest

8. E2E测试@ vue / cypress或@ vue / nightwatch

vue build <filename> 구성 없이 .js 또는 .vue 파일에서 프로덕션에 즉시 사용 가능한 번들을 빌드하세요.

vue Invoke <pluginname> 설치된 플러그인 생성기를 호출하여 플러그인이 제대로 작동하는 데 필요한 파일을 생성합니다.

vue Inspection은 완전히 추상화되었기 때문에 애플리케이션의 웹팩 구성을 표시합니다. 🎜🎜🎜🎜Vue init은 이전 버전 2를 계속 사용하려는 사용자를 위해 예약되어 있지만 이 명령을 사용하려면 전역 브리지를 설치해야 합니다 🎜🎜🎜이를 위해 다음을 실행하세요. 터미널에 다음 코드가 있습니다. 🎜

vue create -p presetname newproject

🎜설치가 완료된 후입니다. 이제 언제든지 버전 3 내에서 직접 버전 2를 사용할 수 있습니다. 🎜

vue add @vue/pwa

🎜🎜🎜 새 프로젝트 만들기 🎜🎜🎜🎜 새 프로젝트를 만들려면 터미널에서 다음 코드를 실행하세요. 🎜

npm install -g @vue/cli-service-global

🎜 여기서 projectname은 만들려는 애플리케이션의 이름입니다. 🎜🎜사전 설정, 기본 사전 설정(babel & eslint 구성 포함)을 선택하거나 필요한 기능을 수동으로 선택하라는 메시지가 표시됩니다. 🎜🎜기본 사전 설정을 선택하면 CLI가 프로젝트를 생성하고 프로젝트를 시작하고 실행하는 데 필요한 플러그인을 설치합니다. 🎜🎜기능을 수동으로 선택하는 경우 CLI는 지원되는 모든 플러그인을 계속 표시하고 프로젝트에 추가할 플러그인을 선택하라는 메시지를 표시합니다. 🎜🎜선택하려면 스페이스바 또는 키보드의 A 키를 사용하여 모든 플러그인을 선택하세요. 🎜🎜완료되면 Enter를 눌러 계속하세요. 🎜🎜선택한 플러그인에 따라 추가 프롬프트가 표시됩니다. 원하는 것을 선택하고 Enter를 누르고 CLI가 완료되도록 하세요. 🎜🎜새 CLI의 멋진 기능 중 하나는 프로젝트를 생성하면 컴퓨터에 프로젝트에 대한 새 저장소도 자동으로 생성된다는 것입니다. 🎜🎜🎜🎜플러그인은 즉시 사용 가능한 🎜🎜🎜

🎜🎜Typescript @vue/typescript🎜🎜🎜🎜Progressive를 지원합니다. 웹 앱 프로그램(PWA) @vue/pwa🎜🎜🎜🎜Vue Router🎜🎜🎜🎜Vuex🎜🎜🎜🎜CSS 전처리기(postcss, CSS 모듈, sass, less 및 스타일러스) 🎜🎜🎜🎜 Linter/포매터 @vue/eslint🎜🎜🎜🎜유닛 테스트 @vue/mocha 또는 @vue/jest🎜🎜🎜🎜E2E 테스트< code>@vue/cypress 또는 @vue/nightwatch 🎜🎜🎜🎜🎜🎜Presets 🎜🎜🎜🎜 CLI를 사용하여 새 프로젝트를 생성하고 기능을 수동으로 선택할 때 기본값입니다. 🎜

CLI使用此创建的预设来创建项目文件。

它使用JSON编写，包含创建新应用时选择的所有功能。

预设可以重复使用，从而使您可以轻松地直接跳入应用程序，而无需在创建将来的应用程序时经历整个功能选择过程。

要使用CLI从先前保存的预设创建新项目，请将目录更改为预设的位置，然后运行以下代码

vue create -p presetname newproject

这将使用指定的预设文件来创建名为newproject的项目名称。

将CLI插件添加到现有项目

要将插件添加到已创建的项目中，只需运行以下命令

vue add @vue/pwa

其中@ vue / pwa是要添加的插件的名称，在这种情况下为Progressive Web App插件。

需要注意的一件事是，新的CLI现在接受软件包的简写名称，例如@ vue / pwa是CLI软件包@ vue / cli-plugin-pwa的简写。

CLI将名称@ vue / value解析为@ vue / cli-plugin-value以安装软件包。

Zero-config快速原型

新的CLI使得使用vue serve和vue build命令以开发或生产模式仅提供.vue或.js文件变得非常容易。

如果您只想测试自己的想法，而又不想打扰配置，那么这是完美的选择。

要使用此命令，您必须首先安装vue CLI全局服务。

为此，只需在您的终端中运行以下代码。

npm install -g @vue/cli-service-global

安装完成后，您可以使用vue serve或vue build。

服务视图

vue serve app.vue

其中app.vue是要提供服务的组件或文件的名称。

serve命令还提供了一个选项，可以在运行完命令后启动浏览器，而不仅仅是向您显示当前正在向其提供应用程序的网址。

为此，请运行vue serve -o app.vue

Vue build

vue build app.vue

其中app.vue是要提供服务的组件或文件的名称。

vue build命令将构建可用于生产环境的捆绑软件，它还允许您指定是将其构建为库还是Web组件。

要构建为库，请使用vue build -t lib app.vue，而要构建为Web组件，请使用vue build -t wc app.vue。

环境变量

新的CLI现在允许您在项目根目录中使用.env文件来使用环境变量。

该文件由键=值对组成。

每个人至少需要管理2个环境，这意味着我们需要为此环境指定变量。

为了有效地做到这一点，CLI引入了我们所说的模式。

模式只是环境的别称，它指定您是处于开发，生产还是测试模式。

创建仅由特定模式使用的变量。 您必须将模式名称作为后缀添加到.env文件名中。

.env.development用于开发模式，.env.production用于生产模式。

注意：要使CLI将变量嵌入客户端捆绑软件代码中，该变量必须以VUE_APP_名称为前缀。

现在添加变量seckey变为VUE_APP_SECKEY

调整Webpack配置

Vue CLI提供了一种非常简单灵活的方法来调整内部Webpack配置。

为此，您必须在vue.config.js中使用configureWebpack选项

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

以防万一您在项目根目录中没有vue.config.js文件。 您将必须手动创建它。

您可能想知道：“我如何知道内部Webpack配置中已经存在的内容，所以我知道需要添加什么？”

好了，这是vue inspect命令变得方便的地方。

此命令将所有内部Webpack配置输出到您的终端。

要将其输出到文件，只需指定这样的文件名

vue inspect > output.js

相关推荐：


2020年前端vue面试题大汇总（附答案）

vue教程推荐：2020最新的5个vue.js视频教程精选

更多编程相关知识，请访问：编程入门！！


위 내용은 Vue CLI3에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!