Vue CLI 学习笔记 1__Vue.js
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
主题列表:juejin, github, smartblue, cyanosis, channing-cyan, fancy, hydrogen, condensed-night-purple, greenwillow, v-green, vue-pro, healer-readable, mk-cute, jzman, geek-black, awesome-green
贡献主题:https://github.com/xitu/juejin-markdown-themes
theme: juejin highlight:
本文是对 Vue CLI 官方文档 复习的摘抄笔记(非原创,侵删)
介绍
Vue CLI
- 基于 Vue.js 进行快速开发的系统,提供
@vue/cli
交互式项目脚手架@vue/cli
+@vue/cli-service-global
零配置原型开发- 运行时 runtime 依赖
@vue/cli-service
- 官方插件合集
- 图形化创建管理的用户界面
- 每个工具配置调整灵活,无需 eject
Vue CLI 独立组件
CLI
- CLI(
@vue/cli
)是全局安装包,提供vue
命令; vue create 项目名
快速搭建新项目;vue serve
构建想法的原型;vue ui
通过 GUI 进行项目管理
CLI Service
- CLI 服务 (
@vue/cli-service
)是开发环境依赖,局部安装在@vue/cli
创建的项目中 - 构建于
webpack
和webpack-dev-server
之上,包含:
- 加载其他 CLI 插件服务;
- 优化过的内部 webpack 配置;
- 局部的
vue-cli-service
命令,提供serve
build
inspect
命令
CLI 插件
- 向 Vue 项目提供可选功能的插件包,包含 Babel/TypeScript 转译、ESLint 集成、单元测试和 end-to-end 测试等;
- 内建插件名
@vue/cli-plugin-
, 社区插件名vue-cli-plugin-
- 在项目内部运行
vue-cli-service
时,会自动解析加载package.json
列出的所有 CLI 插件
安装
- 安装:
npm install -g @vue/cli
或yarn global add @vue/cli
- 查看版本号:
vue --version
- 升级:
npm update -g @vue/cli
或yarn global upgrade --latest @vue/cli
基础
快速原型开发
安装全局扩展: npm install -g @vue/cli-service-global
在开发环境模式下零配置为 .js 或 .vue 文件启动一个服务器: vue serve 文件名
在开发环境模式下零配置构建一个 .js 或 .vue 文件: vue build 文件名
创建一个项目
- 帮助查询:
vue create --help
- 创建项目 hello world:
vue create hello-world
- 按需选择配置:
- 成功创建后命令行显示如图,按照步骤运行
cd hello-world
和yarn serve
,得到可以访问页面的本地/内网地址:
- 得到创建后的 hello-world 项目目录:
- 修改
HelloWorld.vue
文件,然后在 8080 端口得到属于自己的 HelloWorld 页面:
Reference List
Vue CLI 文档版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: STApril 原文链接:https://juejin.im/post/6913842782092132365