使用 vue-lic3 创建 vue 项目

  • 在使用 vue-lic3 创建 vue 项目工程之前首先要确保已经安装了 nodejs,webpack
  • vue-cli 是 vue 的脚手架,可以用配置好的模版快速搭建起一个项目工程,不用自己去配置 webpack 配置文件的基本内容。
  • 安装 vue-cli 3.0 版本:通过 npm install -g @vue/cliyarn global add @vue/cli安装 vue-cli 3

注意:如果已经安装了旧版本,可以使用 npm uninstall vue-cli -gyarn global remove vue-cli卸载旧版本,然后再安装新版本。

  • 安装完后使用 vue -V检查版本,出现如下界面表示安装成功。
    在这里插入图片描述
  • 现在开始创建我们的 vue 项目工程,进入到你要创建项目的文件或磁盘,比如我想在 G 盘创建项目,那就在 G 盘输入命令 vue create my-project
    在这里插入图片描述
  • 它会自动在 G 盘创建一个 my-project 的工程文件夹,按 enter 进入下一步出现如下界面。
    在这里插入图片描述
    这里有两个选项,第一个是默认的,第二个提供更多的选择,可以选择自己需要的功能,我这里选择第二个,按 enter 会看到如下界面。
    在这里插入图片描述
    这里有九个选项,按方向键切换当前选项,按空格键选中当前选项,我说一下这九个选项的意思:
  • 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会暴露给用户。

本次选择如下: (按方向键切换当前选项,按空格键选中当前选项)
在这里插入图片描述
按 enter 进入下一步。
在这里插入图片描述
路由是否使用历史模式,我选择 Y ,按 enter 进入下一步。
在这里插入图片描述
选择CSS预处理器,我选 Sass/SCSS ,按 enter 进入下一步。
在这里插入图片描述
选择 linter / formatter 配置,使用方向键选择,我选第一个,按 enter 进入下一步。
在这里插入图片描述
第一个需要设置保存的路径,我选择第二个,按 enter 进入下一步。
在这里插入图片描述
这一步选择配置文件的位置,出于对 vscode 的友好支持,我选择第一个,按 enter 进入下一步。
在这里插入图片描述
要不要把当前的这一系列选项配置保存起来,方便下一次创建项目时复用,我选 no,按 enter 进入下一步,这时就开始自动配置了。
在这里插入图片描述

  • 至此 vue 项目工程创建完毕,系统提示你进入项目文件夹,然后启动项目:
    在这里插入图片描述
    输入 cd my-project按回车,再输入 npm run serve按回车,会出现如下界面表示项目已经启动:
    在这里插入图片描述
    现在可以在浏览器输入 http://localhost:8080会看到这个界面 。
    在这里插入图片描述
Logo

前往低代码交流专区

更多推荐