为什么80%的码农都做不了架构师?>>>   

准备

  • node 安装:http://nodejs.cn/api/
  • 校验安装:node -v
  • npm 安装:https://www.npmjs.com.cn/
  • 校验安装:npm -v

安装

  • vue 安装:npm install -g vue
  • vue-cll 安装:npm install -g @vue/cli
  • 校验安装:vue --version

快速原型开发

  • 你可以使用 vue servevue 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,也可以选“手动选择特性”来选取需要的特性。
    这个默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。
    如果你决定手动选择特性,在操作提示的最后你可以选择将已选项保存为一个将来可复用的 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 命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。

拉取 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

vue2.x 综合教程 一相关推荐

  1. 全新版大学英语综合教程第一册学习笔记(原文及全文翻译)——8 - Fable Of The Lazy Teenager(懒散少年的寓言)

    Unit 8 - Fable Of The Lazy Teenager(懒散少年的寓言) Benjamin Stein weaves a tale to bring home to young Ame ...

  2. 《日语综合教程》第七册 第四課 読み物 初日影のなかで

    为什么80%的码农都做不了架构师?>>>    上外 <日语综合教程> 翻译注解.点击生词后的数字可以跳转到解释,再次点击返回(BackSpace键也可),支持左右键(← ...

  3. 全新版大学英语综合教程第一册学习笔记(原文及全文翻译)——5 - A Valentine Story(爱情故事)

    Unit 5 - A Valentine Story(爱情故事) A letter or telephone call comes from someone you have not met, and ...

  4. 大学英语综合教程二 Unit 5 课文内容英译中 中英翻译

    大学英语综合教程二 Unit 5 课文内容英译中 中英翻译   大家好,我叫亓官劼(qí guān jié ),在CSDN中记录学习的点滴历程,时光荏苒,未来可期,加油~博客地址为:亓官劼的博客 本文 ...

  5. 软测项目辅导综合教程

    软测项目辅导综合教程 一. 项目介绍 二. 询问测试过程 三. 一个模块如何测试 四. 介绍印象深刻的缺陷 五. Sql注入测试过程 六. cookie测试过程 七. 后端性能测试过程 八. 自动化测 ...

  6. 大学英语综合教程三 Unit 6 课文内容英译中 中英翻译

    大学英语综合教程三 Unit 6 课文内容英译中 中英翻译   大家好,我叫亓官劼(qí guān jié ),在CSDN中记录学习的点滴历程,时光荏苒,未来可期,加油~博客地址为:亓官劼的博客 本文 ...

  7. 大学英语综合教程三 Unit 5 课文内容英译中 中英翻译

    大学英语综合教程三 Unit 5 课文内容英译中 中英翻译   大家好,我叫亓官劼(qí guān jié ),在CSDN中记录学习的点滴历程,时光荏苒,未来可期,加油~博客地址为:亓官劼的博客 本文 ...

  8. 硕博研究生英语综合教程 郭巍 听力材料(下)

    系列文章目录 硕博研究生英语综合教程 郭巍 听力材料(上) 硕博研究生英语综合教程 郭巍 听力材料(下) 文章目录 目录 系列文章目录 文章目录 unit6 Economic inequality u ...

  9. 大学英语综合教程四 Unit 3 课文内容英译中 中英翻译

    大学英语综合教程四 Unit 3 课文内容英译中 中英翻译   大家好,我叫亓官劼(qí guān jié ),在CSDN中记录学习的点滴历程,时光荏苒,未来可期,加油~博客地址为:亓官劼的博客 本文 ...

最新文章

  1. 1200亿次日均位置服务响应、20亿公里日均轨迹里程,百度地图发布新一代人工智能地图生态全景
  2. 黄聪:C# 反射入门知识
  3. filebeat配置详解
  4. java模拟器未载入,由于“活页夹线程池”,应用程序未在模拟器上运行
  5. xhtmlConformance mode=Legacy/ 致ajax失效
  6. Android apk动态加载机制的研究(二):资源加载和activity生命周期管理
  7. 阿里云量产50家独角兽前夜
  8. mysql 8.0远程连接_安装mysql 8.0.17并配置远程访问的方法
  9. spark学习-29-源代码解析从start-all.sh脚本开始
  10. cocos2d之z轴位置示例
  11. php连接mysql地址_PHP连接mysql
  12. hdu-1173(最短距离)
  13. 粒子群算法优化BP和Elman神经网络-matlab源码
  14. 视频编码格式转换软件:compressor for mac中文版
  15. 八种常见视频格式转换详解
  16. (一百二十三)Android O 了解wifi eap中的anonymous identity
  17. 1. 从WordPress搬家到网易博客!
  18. Frps部署报错:cannot stat ‘frp_0.44.0_linux_amd64/frps‘: No such file or directory
  19. Unity3D 角色控制器 Character Controller
  20. 好友朋友圈动态仅三天可见?点击这个按钮,不管多久都能看

热门文章

  1. C#解析XML各种方法特点比较(转载)
  2. [原创].NET 分布式架构开发实战之一 故事起源
  3. UA MATH524 复变函数13 奇点与留数
  4. UA SIE545 优化理论基础4 对偶理论简介5 对偶的几何解释
  5. VS2019 开发第一个Windows驱动程序
  6. dNet项目数据访问层代码总结
  7. Python爬虫-Scrapy-CrawlSpider与ItemLoader
  8. sqlite3 C接口基础
  9. 浅谈WebGIS开放数据(矢量数据)
  10. Docker最佳实践-部署LNMP环境