vue2.x 综合教程 一
为什么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 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,也可以选“手动选择特性”来选取需要的特性。
这个默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。
如果你决定手动选择特性,在操作提示的最后你可以选择将已选项保存为一个将来可复用的 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 综合教程 一相关推荐
- 全新版大学英语综合教程第一册学习笔记(原文及全文翻译)——8 - Fable Of The Lazy Teenager(懒散少年的寓言)
Unit 8 - Fable Of The Lazy Teenager(懒散少年的寓言) Benjamin Stein weaves a tale to bring home to young Ame ...
- 《日语综合教程》第七册 第四課 読み物 初日影のなかで
为什么80%的码农都做不了架构师?>>> 上外 <日语综合教程> 翻译注解.点击生词后的数字可以跳转到解释,再次点击返回(BackSpace键也可),支持左右键(← ...
- 全新版大学英语综合教程第一册学习笔记(原文及全文翻译)——5 - A Valentine Story(爱情故事)
Unit 5 - A Valentine Story(爱情故事) A letter or telephone call comes from someone you have not met, and ...
- 大学英语综合教程二 Unit 5 课文内容英译中 中英翻译
大学英语综合教程二 Unit 5 课文内容英译中 中英翻译 大家好,我叫亓官劼(qí guān jié ),在CSDN中记录学习的点滴历程,时光荏苒,未来可期,加油~博客地址为:亓官劼的博客 本文 ...
- 软测项目辅导综合教程
软测项目辅导综合教程 一. 项目介绍 二. 询问测试过程 三. 一个模块如何测试 四. 介绍印象深刻的缺陷 五. Sql注入测试过程 六. cookie测试过程 七. 后端性能测试过程 八. 自动化测 ...
- 大学英语综合教程三 Unit 6 课文内容英译中 中英翻译
大学英语综合教程三 Unit 6 课文内容英译中 中英翻译 大家好,我叫亓官劼(qí guān jié ),在CSDN中记录学习的点滴历程,时光荏苒,未来可期,加油~博客地址为:亓官劼的博客 本文 ...
- 大学英语综合教程三 Unit 5 课文内容英译中 中英翻译
大学英语综合教程三 Unit 5 课文内容英译中 中英翻译 大家好,我叫亓官劼(qí guān jié ),在CSDN中记录学习的点滴历程,时光荏苒,未来可期,加油~博客地址为:亓官劼的博客 本文 ...
- 硕博研究生英语综合教程 郭巍 听力材料(下)
系列文章目录 硕博研究生英语综合教程 郭巍 听力材料(上) 硕博研究生英语综合教程 郭巍 听力材料(下) 文章目录 目录 系列文章目录 文章目录 unit6 Economic inequality u ...
- 大学英语综合教程四 Unit 3 课文内容英译中 中英翻译
大学英语综合教程四 Unit 3 课文内容英译中 中英翻译 大家好,我叫亓官劼(qí guān jié ),在CSDN中记录学习的点滴历程,时光荏苒,未来可期,加油~博客地址为:亓官劼的博客 本文 ...
最新文章
- 1200亿次日均位置服务响应、20亿公里日均轨迹里程,百度地图发布新一代人工智能地图生态全景
- 黄聪:C# 反射入门知识
- filebeat配置详解
- java模拟器未载入,由于“活页夹线程池”,应用程序未在模拟器上运行
- xhtmlConformance mode=Legacy/ 致ajax失效
- Android apk动态加载机制的研究(二):资源加载和activity生命周期管理
- 阿里云量产50家独角兽前夜
- mysql 8.0远程连接_安装mysql 8.0.17并配置远程访问的方法
- spark学习-29-源代码解析从start-all.sh脚本开始
- cocos2d之z轴位置示例
- php连接mysql地址_PHP连接mysql
- hdu-1173(最短距离)
- 粒子群算法优化BP和Elman神经网络-matlab源码
- 视频编码格式转换软件:compressor for mac中文版
- 八种常见视频格式转换详解
- (一百二十三)Android O 了解wifi eap中的anonymous identity
- 1. 从WordPress搬家到网易博客!
- Frps部署报错:cannot stat ‘frp_0.44.0_linux_amd64/frps‘: No such file or directory
- Unity3D 角色控制器 Character Controller
- 好友朋友圈动态仅三天可见?点击这个按钮,不管多久都能看