# 简介&安装
# 简介
渐进式 JavaScript 框架
# 安装
- 在页面上以 CDN 包的形式导入。
- 下载 JavaScript 文件并自行托管
- 使用 npm 安装它。
- 使用官方的 CLI 来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)。
主要使用 vue-cli 安装。
# vue-cli
注意： vue2.x 版本叫 vue-cli，vue3.x 版本叫 @vue/cli。
# npm
npm install -g @vue/cli
# yarn
yarn global add @vue/cli
# 卸载 老版本
npm uninstall vue-cli -g
yarn global remove vue-cli
# 查看当前版本
vue --version
@vue/cli 4.5.13
# 升级全局的 Vue CLI 包
# npm
npm update -g @vue/cli
# yarn
yarn global upgrade --latest @vue/cli
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 快速原型开发
可以使用 vue serve 和 vue build 命令对单个 *.vue 文件进行快速原型开发
此方式在学习 vue 语法时有用，只需创建单个 .vue 文件即可，不需要创建完整的项目
# 全局安装 cli-service-global
npm install -g @vue/cli-service-global
# 启动
# 在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器
vue serve [options] [entry]
## Options:
##
## -o, --open 打开浏览器
## -c, --copy 将本地 URL 复制到剪切板
## -h, --help 输出用法信息
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
使用步骤：
- 在任意目录下创建
.vue文件，如HelloWorld.vue，文件内容如下：
<template>
<h1 class="demo">Hello World</h1>
</template>
<script lang='ts'>
export default {
}
</script>
<style scoped>
.demo {
color: red;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
- 在当前目录下运行：
vue serve HelloWorld.vue
# 命令中的 HelloWorld.vue 是可选项，可以不输入。
# 当当前目录下有多个 .vue 文件时，需要指定启动的是哪一个文件。
1
2
3
2
3
- 打包构建：（可选）
# 在生产环境模式下零配置构建一个 .js 或 .vue 文件
vue build [options] [entry]
## Options:
##
## -t, --target <target> 构建目标 (app | lib | wc | wc-async, 默认值：app)
## -n, --name <name> 库的名字或 Web Components 组件的名字 (默认值：入口文件名)
## -d, --dest <dir> 输出目录 (默认值：dist)
## -h, --help 输出用法信息
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
# 使用
# 创建项目
vue create [options] <app-name> # vue create hello-world
# 选项：
#
# -p, --preset <presetName> 忽略提示符并使用已保存的或远程的预设选项
# -d, --default 忽略提示符并使用默认预设选项
# -i, --inlinePreset <json> 忽略提示符并使用内联的 JSON 字符串预设选项
# -m, --packageManager <command> 在安装依赖时使用指定的 npm 客户端
# -r, --registry <url> 在安装依赖时使用指定的 npm registry
# -g, --git [message] 强制 / 跳过 git 初始化，并可选的指定初始化提交信息
# -n, --no-git 跳过 git 初始化
# -f, --force 覆写目标目录可能存在的配置
# -c, --clone 使用 git clone 获取远程预设选项
# -x, --proxy 使用指定的代理创建项目
# -b, --bare 创建项目时省略默认组件中的新手指导信息
# -h, --help 输出使用帮助信息
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
注意： 上图中的 第一个选项 leichu-vue3-config 是首次使用时，选择好配置后保存下来的，配置文件在 C:\Users\leichu\.vuerc 中，内容如下：
{
"useTaobaoRegistry": false,
"latestVersion": "4.5.13",
"lastChecked": 1624613395857,
"presets": {
"leichu-vue3-config": {
"useConfigFiles": true,
"plugins": {
"@vue/cli-plugin-babel": {},
"@vue/cli-plugin-typescript": {
"classComponent": true,
"useTsWithBabel": true
},
"@vue/cli-plugin-router": {
"historyMode": true
},
"@vue/cli-plugin-vuex": {},
"@vue/cli-plugin-eslint": {
"config": "prettier",
"lintOn": [
"save"
]
},
"@vue/cli-plugin-unit-jest": {}
},
"vueVersion": "3",
"cssPreprocessor": "node-sass"
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
此时选择最后一项 Manually select features，手动安装。
声明周期 →