手把手使用 vue-lic3.0 快速构建项目(全)

使用 vue-lic3.0 快速构建项目

  • 安装前需要注意的地方:

  • Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli(1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
  • Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows在同一台电脑中管理多个 Node 版本。

 

  • 可以使用下列任一命令安装vue-cli3:

  • 使用yarn的话需要先去下载安装:

https://yarn.bootcss.com/docs/install/#windows-stable

npm install -g @vue/cli
# OR
yarn global add @vue/cli
  •  安装完成后使用 vue -V 查看安装版本确认是否安装成功
  •  注意 V 要大写的

        手把手使用 vue-lic3.0 快速构建项目(全)_第1张图片

  •  接下来开始使用vue-cli3创建项目,先进入创建好的目录,然后输入命令 vue create hello , hello为自定义项目目录名称

        手把手使用 vue-lic3.0 快速构建项目(全)_第2张图片

        这里提示选取一个 preset。第一个默认的包含了基本的 Babel + ESLint 设置的 preset,第二个是手动选择,手动选择会提            供更多的选项

  •  我们这里选择第二个

        手把手使用 vue-lic3.0 快速构建项目(全)_第3张图片 

        上下键移动,空格键选中,a全选,i反选 ,这里可以选择你需要的

  • Babel:提供 babel 支持。
  • TypeScript:支持 TypeScript 格式。
  • Progressive Web App (PWA) Support:PWA 支持(渐进式Web应用程序)。
  • Router:支持 Vue Router ,它是Vue.js 官方的路由管理器。
  • Vuex:支持 Vuex ,它是一个专为 Vue.js 应用程序开发的状态管理模式。
  • CSS Pre-processors:支持 CSS 预处理器,可以选择自己想要的处理器。
  • Linter / Formatter:

Linter检查代码错误的小工具。
Formatter用来格式化文本,主要用在文本输出方面,比如,数字、日期、金额等。

  • Unit Testing支持单元测试。
  • E2E Testing支持 e2e 测试。

e2e 测试是一种测试方法,它用来测试一个应用从头到尾的流程是否和设计时候所想的一样。简而言之,它从一个用户的角度出发,认为整个系统都是一个黑箱,只有UI会暴露给用户。
 

  • 路由是否使用历史模式

      

      这里我选择了Y

  • 选择css预处理器,自己按照需要选择就好

       手把手使用 vue-lic3.0 快速构建项目(全)_第4张图片 

  • 选择linter / formatter配置(我这里选择:ESLint + Prettier)

       手把手使用 vue-lic3.0 快速构建项目(全)_第5张图片

  • 选择什么时候检查代码 (我这里选择保存检查)

       手把手使用 vue-lic3.0 快速构建项目(全)_第6张图片

 

  •  你更喜欢将Babel、PostCSS、ESLint等配置放在哪里? (单独放,已经放在 package.json中,我这里选择第一个)
  •  把这个作为将来项目的预置?(y / N) (选择y后下次就不用重新配置了)

        手把手使用 vue-lic3.0 快速构建项目(全)_第7张图片 

  • 好了,配置完成了接下来等待就好了

       手把手使用 vue-lic3.0 快速构建项目(全)_第8张图片 

  • 安装完成了,提示你进入到项目文件夹,然后输入 npm run serve 开始项目

       手把手使用 vue-lic3.0 快速构建项目(全)_第9张图片 

  • 成功运行显示下面信息

       手把手使用 vue-lic3.0 快速构建项目(全)_第10张图片

      手把手使用 vue-lic3.0 快速构建项目(全)_第11张图片

你可能感兴趣的:(前端,vue,vue-cli)