清茶书香

一杯清茶,一本书籍,一个下午。


  • 首页

  • 归档

  • 分类

  • 关于

  • 搜索
Redis JPA Solr SpringData SpringMVC localRepository local Mapper 事务 Mybatis JDBC AOP DI IOC 常用函数 触发器 存储过程 Promise Gateway SpringCloud vue-cli axios es6 webpack npm vue 个性化 zsh 终端 caffeine jvm缓存 guava cache validation Mapping MapStruct comment 小程序 建站 WeHalo config logback plugins database idea maven spring https http nginx password RabbitMQ 秒杀系统 Windows MySQL 数据备份 halo SpringBoot shell Linux ip Optional Stream Lambda k8s Docker 列编辑 vim MacOS 图片合成 Java 远程联调 nps 内网穿透

vue学习记录之vue-cli

发表于 2021-03-27 | 分类于 vue | 0 | 阅读次数 875

vue-cli是Vue官方提供的开发脚手架,能快速创建一个开发的demo,并且部分配置也已经配置好了可以直接进行项目开发。

安装vue-cli

npm install -g @vue/cli
# OR
yarn global add @vue/cli

更新vue-cli

npm update -g @vue/cli
# OR
yarn global upgrade --latest @vue/cli

创建项目

vue create <projectName>

选择模版

它会提示你选择一个预设项,下面的第一个是我曾创建时保存的一个模板,默认是让选择vue2、vue3、自定义

Vue CLI v4.5.11
┌───────────────────────────────────────────┐
│                                           │
│   New version available 4.5.11 → 4.5.13   │
│     Run npm i -g @vue/cli to update!      │
│                                           │
└───────────────────────────────────────────┘

vue3-template ([Vue 3] dart-sass, babel, router, vuex, eslint) 
Default ([Vue 2] babel, eslint) 
Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
Manually select features 

选择自定义模块

选择自定义后会提示你选择需要的模块

Vue CLI v4.5.11
┌───────────────────────────────────────────┐
│                                           │
│   New version available 4.5.11 → 4.5.13   │
│     Run npm i -g @vue/cli to update!      │
│                                           │
└───────────────────────────────────────────┘

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Choose Vue version //选择vue版本
 ◉ Babel // 处理es6兼容性插件
 ◯ TypeScript //使用ts创建项目
❯◯ Progressive Web App (PWA) Support // 用vue开发APP应用
 ◯ Router //vue的路由
 ◯ Vuex // vue状态管理
 ◯ CSS Pre-processors // less、sass处理
 ◉ Linter / Formatter // 检查语法的插件
 ◯ Unit Testing //单元测试
 ◯ E2E Testing //端对端测试

在操作提示的最后你可以选择将已选项保存为一个将来可复用的preset,会被保存到用户目录下名为.vuerc的JSON文件,可通过修改该文件删除已保存的设置。

图形化UI创建

vue ui

运行此命令就会打开一个网页,可在此网页中选择进行配置。

使用cli安装插件

# 使用短名称安装插件
vue add eslint
vue add apollo
# 使用完整名称安装插件
vue add @foo/bar
# 可以向被安装的插件传递生成器选项 (这样做会跳过命令提示)
vue add eslint --config airbnb --lintOn save

...

vue配置

之前的css、webpack等配置都是webpack.config.js中进行配置,有时候还需要引入node中的库,而vue.config.js对此进行了一次封装,让我们可以只关注配置本身,不需要考虑其他的。

这个文件应该导出一个包含了选项的对象:

module.exports = {
  // 选项...
}

可配置的选项比较多,这里就简单的挑几个做个示例,其他的可在👉选项查看。

vue.config.js

module.exports = {
  outputDir: 'dist',
  configureWebpack: {
    plugins: [
      new BannerPlugin({
	banner: 'bennett-hibennett.cn'
      })
    ]
  }
};

参考的官方文档

Vue CLI:https://cli.vuejs.org/zh/guide
配置参考:https://cli.vuejs.org/zh/config/#vue-config-js

Bennett wechat
欢迎收藏我的微信小程序,方便查看更新的文章。
  • 本文作者: Bennett
  • 本文链接: https://hibennett.cn/archives/vue-cli
  • 版权声明: 本博客所有文章除特别声明外,均采用CC BY-NC-SA 3.0 许可协议。转载请注明出处!
# vue # vue-cli
vue学习记录之axios
spring-cloud-gateway注入Bean时循环依赖
  • 文章目录
  • 站点概览
Bennett

Bennett

60 日志
28 分类
74 标签
RSS
Github E-mail Gitee QQ
Creative Commons
Links
  • MacWk
  • 知了
0%
© 2020 — 2023 hibennett.cn版权所有
由 Halo 强力驱动
|
主题 - NexT.Pisces v5.1.4

浙公网安备 33010802011246号

    |    浙ICP备2020040857号-1