小白学 VUE 系列之安装 vue cli 与创建

安装 vue cli

安装之前确保你电脑已经安装了 node 并且版本是 8.9 + 。

npm install -g @vue/cli

安装之后,查询版本号

vue --version

创建

vue create 项目名称

配置参数说明

用法: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                      输出使用帮助信息

描述

描述
按空格即可选择,选择完之后,回车即可。

描述

说明

  • Babel是一个javascript编译器

Babel 是一个工具链,主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法,以便能够运行在当前和旧版本的浏览器或其他环境中

  • TypeScript 支持使用 TypeScript 书写源码
  • Progressive Web App (PWA) Support PWA 支持。

PWA全称Progressive Web App,即渐进式网络应用程序,PWA是一种编写Web应用程序的新方式,它使得webAPP更接近原生APP的体验

  • Router 支持 vue-router 。
  • Vuex 支持 vuex 。
  • CSS Pre-processors 支持 CSS 预处理器。
  • Linter / Formatter 支持代码风格检查和格式化。
  • Unit Testing 支持单元测试。
  • E2E Testing 支持 E2E 测试。
Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) 
//路由是否使用 history  模式

后面选择自己的CSS编译器,我这里选择了less
描述

描述
什么时候检查

Lint on save // 保存就检测
Lint and fix on commit // fix和commit时候检查

描述

Babel、ESLint等配置文件是存放在单独文件还是在 package.json

 Save this as a preset for future projects? (y/N)
 //是否将其保存为将来项目的预设?(是/否)

描述

等待安装即可。

快速原型

需要先安装这个全局服务

 npm install -g @vue/cli-service-global

比如我现在要运行某个vue文件

vue serve MyComponent.vue

后面可增加参数如下

 -o, --open  打开浏览器
  -c, --copy  将本地 URL 复制到剪切板
  -h, --help  输出用法信息

构建

vue build MyComponent.vue

参数


  -t, --target <target>  构建目标 (app | lib | wc | wc-async, 默认值:app)
  -n, --name <name>      库的名字或 Web Components 组件的名字 (默认值:入口文件名)
  -d, --dest <dir>       输出目录 (默认值:dist)
  -h, --help             输出用法信息

启动服务

npm run serve 启动服务
npm run build 打包

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。