前言

在实际项目中,我们通常会使用 vue 脚手架来快速部署我们的项目,在这里,我记录了一下我对于脚手架安装的一点个人理解,希望对你也有所帮助。

安装 Vue 脚手架

全局安装:

1
2
3
npm install -g @vue/cli
# OR
yarn global add @vue/cli

注意:上面安装的是 Vue CLI 最新的版本,如果想要按照 Vue CLI2 的方式初始化项目是不可以的

拓展:

在安装完后可以使用vue --version来查看我们安装的 Vue CLI 版本,如果这时候终端报如下错误:

1
2
3
4
5
6
vue : 无法加载文件 D:\node.js\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。
所在位置 行:1 字符: 1
+ vue --version
+ ~~~
+ CategoryInfo : SecurityError: (:) [],PSSecurityException
+ FullyQualifiedErrorId : UnauthorizedAccess

如果发生以下错误,我们可以使用管理员身份打开Windows PowerShell工具(注意不是cmd),输入set-ExecutionPolicy RemoteSigned ,选择 Y 或者 A,即可。

拉取 2.x 模板

最新的 Vue CLI 和旧版使用了相同的 Vue 命令。所以 Vue CLI2(vue-cli)被覆盖了。如果仍然需要使用旧版本的vue init 功能。可以全局安装一个桥接工具:

1
2
3
npm install -g @vue/cli-init
#'vue init' 的运行效果将会跟'vue-cli@2.x'相同
vue init webpack my-project

项目初始化

  1. Vue CLi2 初始化项目
1
vue init webpack my-project
  1. Vue Cli >=3 初始化项目
1
2
3
4
vue create hello-world
#使用图形化界面
vue ui
#上述命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。

初始化项目的过程

初始化项目(Vue-CLI2)

1
vue init webpack vuecli2test(项目名称不能包含大写)
  • Project name

#项目名字 不能包含大写 #通常情况下,项目名字和我们文件夹名字是一样的

  • Project description

#项目描述

  • Author #作者,.getconfig 全局可能已经配置了一个默认信息

  • Vue build(use arrow keys)

Runtime + Compiler: recommended for most users

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere

#选择之后构建项目使用哪一个来进行构建。通常情况下我们会选择下面这个,主要有 2 个好处:

1.下面的选项更加小巧。

2.下面的选项效率更加高。

Runtime + Compiler 和 Runtime-only 的区别:他们的区别只在于 main.js 里面

  • Install vue-router? (Y/n) #是否安装路由

  • Use ESLint to lint your code? (Y/n) #是否使用 ESlint, es-lint 主要是对 js 代码做一些限制,让 js 代码更加规范

  • Pick an ESLint preset (Use arrow keys) 选择一个 eslint 的规范(选择使用 eslint 的时候)

Standard (https://github.com/standard/standard) #eslint 标准规范

Airbnb (https://github.com/airbnb/javascript) #爱彼迎的一个规范

none (configure it yourself) #自己配置

  • Set up unit tests (Y/n)

#单元测试

  • Setup e2e tests with Nightwatch? (Y/n) #端到端测试 ,安装 Nightwatch,是一个利用 seionlum 或者 drive 或 phantomjs 等进行自动化测试的框架

  • Should we run npm install for you after the project has been created? (recommended)
    (Use arrow keys) #选择管理工具

Yes, use NPM
Yes, use Yarn
No, I will handle that myself

认识 Vue CLI3

  • Vue-Cli3 与 2 版本有很大的区别:
    • Vue-Cli3 是基于 webpack4 打造,Vue-Cli2 还是 webpack3
    • Vue-Cli3 的设计原则是‘0 配置’,移除的配置文件根目录下的 build 和 config 等目录
    • Vue-Cli3 提供了vue ui命令,提供了可视化配置,更加人性化
    • 移除了 static 文件夹,新增了 public 文件夹,并且 index.html 移动到了 public 中

初始化项目(Vue-Cli3)

1
vue create my-project (项目名称)
  • Your connection to the default yarn registry seems to be slow.
    Use https://registry.npm.taobao.org for faster installation? (Y/n)

    #这是提示网络较慢,问要不要转到淘宝来安装,会更快一点。

  • Please pick a preset: (Use arrow keys) #选择一个配置

    default (babel, eslint) #默认配置

    Manually select features #手动配置

    • 如果选择手动配置:

    Check the features needed for your project: (Press to select, to toggle all, to invert selection) #检测项目所需要的特性:空格是选择和取消,a 是权限,i 是全不选

    ( ) Babel

    ( ) TypeScript

    ( ) Progressive Web App (PWA) Support #渐进式 web 应用程序(PWA)支持

    ( ) Router #路由

    ( ) Vuex #状态管理

    ( ) CSS Pre-processors #CSS 预处理器

    ( ) Linter / Formatter #eslint 对代码进行一些检测

    ( ) Unit Testing #单元测试

    ( ) E2E Testing #端到端测试

  • Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)

    #你打算把 Babel,ESLint 等配置文件放到哪里

    In dedicated config files #单独配置文件
    In package.json #放在 package.json 里

  • Save this as a preset for future projects? (y/N) # 把它作为未来项目的预置?

    • 如果选择 Y:
      • Save preset as: templateset #输入保存的名字
    • 如果要删除保存预置项目
    • 找到 C:\Users\Administrator\.vuerc 文件
      • 删除该文件里的 presets 即可
  • Pick the package manager to use when installing dependencies: (Use arrow keys) #在安装依赖项时选择要使用的包管理器:

    Use Yarn
    Use NPM

Vue-Cli3 的配置文件的查看和修改

  • 使用图像化进行配置:
1
vue ui

也可以自己创建一个 vue.config.js 文件,这个文件名字是固定的。

1
2
3
module.exports = {
//这写自己的配置
}

结语

以上就是脚手架安装的全部过程了。希望对你也有所帮助!