vue2.x 综合教程一

谁借莪１个温暖的怀抱￠ 2022-01-15 11:21 272阅读 0赞

[为什么80%的码农都做不了架构师？>>> ][80_]  ![hot3.png][]

### **准备** ###

*  node 安装：[http://nodejs.cn/api/][http_nodejs.cn_api]
 *  校验安装：node -v
 *  npm 安装：[https://www.npmjs.com.cn/][https_www.npmjs.com.cn]
 *  校验安装：npm -v

--------------------

### **安装** ###

*  vue 安装：`npm install -g vue`
 *  vue-cll 安装：`npm install -g @vue/cli`
 *  校验安装：`vue --version`

--------------------

### **快速原型开发** ###

*  你可以使用 `vue serve` 和 `vue build` 命令对单个 `*.vue` 文件进行快速原型开发，不过这需要先额外安装一个全局的扩展：`npm install -g @vue/cli-service-global` vue serve 的缺点就是它需要安装全局依赖，这使得它在不同机器上的一致性不能得到保证。因此这只适用于快速原型开发。

*  vue serve

Usage: serve [options] [entry]
    在开发环境模式下零配置为 .js 或 .vue 文件启动
    Options:
      -o, --open  打开浏览器
      -c, --copy  将本地 URL 复制到剪切板
      -h, --help  输出用法信息

*  你所需要的仅仅是一个 App.vue 文件：

<template>
      <h1>Hello!</h1>
    </template>

*  然后在这个 App.vue 文件所在的目录下运行`vue serve`
 *  vue serve 使用了和 vue create 创建的项目相同的默认设置 (webpack、Babel、PostCSS 和 ESLint)。它会在当前目录自动推导入口文件——入口可以是 main.js、index.js、App.vue 或 app.vue 中的一个。你也可以显式地指定入口文件：`vue serve demo.vue` 如果需要，你还可以提供一个 index.html、package.json、安装并使用本地依赖、甚至通过相应的配置文件配置 Babel、PostCSS 和 ESLint。
 *  vue build

Usage: build [options] [entry]
    在生产环境模式下零配置构建一个 .js 或 .vue 文件
    Options:
      -t, --target <target>  构建目标 (app | lib | wc | wc-async, 默认值：app)
      -n, --name <name>      库的名字或 Web Components 组件的名字 (默认值：入口文件名)
      -d, --dest <dir>       输出目录 (默认值：dist)
      -h, --help             输出用法信息

*  你也可以使用 vue build 将目标文件构建成一个生产环境的包并用来部署： `vue build MyComponent.vue` vue build 也提供了将组件构建成为一个库或一个 Web Components 组件的能力。查阅构建目标了解更多。

--------------------

### **创建一个项目** ###

*  运行以下命令来创建一个新项目：`vue create hello-world`
 *  你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。 ![3058cd8d7faf97cdf5fe7f82b45e6991b0e.jpg][]  
    这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。 ![b6b75954f4be37f1a8f918d5bd823de0d20.jpg][]  
    如果你决定手动选择特性，在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。我们会在下一个章节讨论 preset 和插件。

> ~/.vuerc 被保存的 preset 将会存在用户的 home 目录下一个名为 .vuerc 的 JSON 文件里。如果你想要修改被保存的 preset / 选项，可以编辑这个文件。 在项目创建的过程中，你也会被提示选择喜欢的包管理器或使用淘宝 npm 镜像源以更快地安装依赖。这些选择也将会存入 ~/.vuerc。

*  vue create 命令有一些可选项，你可以通过运行以下命令进行探索：`vue create --help`

用法：create [options] <app-name>
    创建一个由 `vue-cli-service` 提供支持的新项目
    选项：
      -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                      输出使用帮助信息

--------------------

### **使用图形化界面** ###

*  你也可以通过 vue ui 命令以图形化界面创建和管理项目：`vue ui` 命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。 ![d88d4257457ef9a9fbd9e6d5ffb803852c8.jpg][]

--------------------

### **拉取 2.x 模板 (旧版本)** ###

*  Vue CLI >= 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具：

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

转载于:https://my.oschina.net/hibony/blog/3039938

[80_]: https://my.oschina.net/u/2663968/blog/3051541
[hot3.png]: /images/20220115/2ca01682d5f041eeadf8dce0da4f355e.png
[http_nodejs.cn_api]: http://nodejs.cn/api/
[https_www.npmjs.com.cn]: https://www.npmjs.com.cn/
[3058cd8d7faf97cdf5fe7f82b45e6991b0e.jpg]: /images/20220115/76edaf0a1adc46feba188105d8b29a35.png
[b6b75954f4be37f1a8f918d5bd823de0d20.jpg]: /images/20220115/1d9866d1de544275972b2972f6bd6554.png
[d88d4257457ef9a9fbd9e6d5ffb803852c8.jpg]: /images/20220115/c125285542ea4507aece6db146e5c83c.png