Vue脚手架安装详解
前言
在实际项目中,我们通常会使用 vue 脚手架来快速部署我们的项目,在这里,我记录了一下我对于脚手架安装的一点个人理解,希望对你也有所帮助。
安装 Vue 脚手架
全局安装:
1 | npm install -g @vue/cli |
注意:上面安装的是 Vue CLI 最新的版本,如果想要按照 Vue CLI2 的方式初始化项目是不可以的
拓展:
在安装完后可以使用vue --version
来查看我们安装的 Vue CLI 版本,如果这时候终端报如下错误:
1 | vue : 无法加载文件 D:\node.js\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅 https:/go.microsoft.com/fwlink/?LinkID=135170 中的 about_Execution_Policies。 |
如果发生以下错误,我们可以使用管理员身份打开Windows PowerShell
工具(注意不是cmd
),输入set-ExecutionPolicy RemoteSigned
,选择 Y 或者 A,即可。
拉取 2.x 模板
最新的 Vue CLI 和旧版使用了相同的 Vue 命令。所以 Vue CLI2(vue-cli
)被覆盖了。如果仍然需要使用旧版本的vue init
功能。可以全局安装一个桥接工具:
1 | npm install -g @vue/cli-init |
项目初始化
- Vue CLi2 初始化项目
1 | vue init webpack my-project |
- Vue Cli >=3 初始化项目
1 | vue create hello-world |
初始化项目的过程
初始化项目(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 即可
- 如果选择 Y:
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 | module.exports = { |
结语
以上就是脚手架安装的全部过程了。希望对你也有所帮助!