vue-cli的使用指南
2024-10-07 22:45:52
vue-cli 2.0
安装vue-cli
npm install -g vue-cli
创建一个项目模板
vue init <template-name> <project-name>
template-name:
- wepack 功能齐全的Webpack + vue-loader设置,具有热重载,linting,测试和css提取功能。
- webpack-simple 一个简单的Webpack + vue-loader设置,用于快速原型设计
- browserify 全功能的Browserify + vueify设置,具有热重载,linting和单元测试功能。
- browserify 一个简单的Browserify + vueify设置,用于快速原型设计
- pwa 基于vue webpack 模板的pwa模板
- simple 最简单的vue单页面项目
用例:
vue init webpack projectName(一般情况下都是用webpack模板)
完整用例-初始化一个vue的webpack项目myProject
1.安装模板
vue init webpack myProject
2.进入myProject文件夹
cd myProject
3.安装项目依赖包
npm install
4.启动项目
npm run dev
vue-cli 3.0
安装 @vue/cli
npm install -g @vue/cli
安装完成后运行以下命令查看安装是否成功:
vue --version
创建一个项目myProject
vue create myProject
查看帮助
vue create --help
使用图形化界面
你也可以通过vue ui
命令以图形化界面创建和管理项目:
vue ui
在3.x使用2.x的模板
安装一个全局桥接工具拉取2.x的模板
npm install -g @vue/cli-init
vue init webpack myProject
插件
Vue CLI 使用了一套基于插件的架构,插件可以修改 webpack 的内部配置,也可以向 vue-cli-service 注入命令。在项目创建的过程中,绝大部分列出的特性都是通过插件来实现的。
插件安装
vue add @vue/eslint
# 等价于
vue add @vue/cli-plugin-eslint
你也可以基于一个指定的 scope 使用第三方插件。例如如果一个插件名为 @foo/vue-cli-plugin-bar,你可以这样添加它:
vue add @foo/bar
你可以向被安装的插件传递生成器选项 (这样做会跳过命令提示):
vue add @vue/eslint --config airbnb --lintOn save
vue-router 和 vuex 的情况比较特殊——它们并没有自己的插件,但是你仍然可以这样添加它们:
vue add router
vue add vuex
最新文章
- JavaScript葵花宝典之闭包
- 专为控制打印设计的CSS样式
- img加载在IE11,chrome,FF下的不同
- Hacker&#39;s guide to Neural Networks
- Nginx 开启PATHINFO支持ThinkPHP框架实例
- jQuery函数attr()和prop()的区别,val()
- 通用PE u盘启动盘制作
- JSON 之FastJson解析
- UNDO表空间损坏,爆满,ORA-600[4194]/[4193]错误解决
- Unity问答——请问一下动画状态机怎么判断动画是否播完了?
- datagridview,textbox,combobox的数据绑定,数据赋值,picturebox的用法
- iOS堆栈-内存-代码在据算机中的运行
- 【高德地图API】从零开始学高德JS API(三)覆盖物——标注|折线|多边形|信息窗口|聚合marker|麻点图|图片覆盖物
- vue 设计日历表
- Mysql查询创建和导入操作
- 一文读懂SpringCloud与Eureka,Feign,Ribbon,Hystrix,Zuul核心组件间的关系
- 建立Heapster Influxdb Grafana集群性能监控平台
- 贝塞尔曲线UIBezierPath简单使用
- Linux regulator framework(1) - 概述【转】
- eclipse再见,android studio 新手新手教程(一)基本设置