Vue脚手架安装详解

前言

在实际项目中,我们通常会使用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 = {
//这写自己的配置
}

结语

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

------ 本文结束  感谢阅读 ------