一、Vue-cli 3.x安装

Node 版本要求:Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)

npm install -g @vue/cli

查版本是否正确 (3.x):

vue --version

官方安装文档:https://cli.vuejs.org/zh/guide/installation.html

二、创建一个项目

以搭建一个项目名称为vue-test的Vue前端项目为例

1.在cmd下运行以下命令创建项目

vue create vue-test

下面将根据提示进行相应的配置。

2.选择配置方式

说明:

  • default (babel, eslint) :默认配置
  • Manually select features: 手动选择配置

这里选择 Manually select features

3.手动选择项目需要的特性

说明:

  • Babel: Babel编译
  • TypeScript:TypeScript支持
  • Progressive Web App (PWA) Support: PWA支持
  • Router: Vue路由
  • Vuex: Vue状态管理
  • CSS Pre-processors: CSS预编译器(包括:SCSS/Sass、Less、Stylus)
  • Linter / Formatter: 代码检测和格式化
  • Unit Testing: 单元测试
  • E2E Testing: 端到端测试

这里选择上图勾选的项。

4.路由是否采用history模式,这里选择 y

5.选择CSS预编译器,这里选择 Less

6.选择ESLint的代码规范,这里选择 ESLint + Standard config

7.选择何时进行代码检测,这里选择 Lint on save

说明:

  • Lint on save: 在保存时进行检测
  • Lint and fix on commit: 在fix和commit是进行检查

8.选择单元测试解决方案,这里选择 Jest

9.选择 Babel、PostCSS、ESLint等配置文件存放位置,这里选择 In dedicated config files

说明:

  • In dedicated config files: 单独保存在各自的配置文件中
  • In package.json: 保存在package.json文件中

10.是否记录一下以便下次使用这套配置,这里选择 N 不记录,如果键入Y需要输入保存名字

11.确定后,等待Vue-cli完成初始化

12.vue-cli初始化完成后,根据提示,进入vue-test项目中,并启动项目

(1)进入vue-test项目

cd vue-test

(2)启动服务

yarn serve

(3)打包编译

yarn build

(4)执行lint

yarn lint

(5)执行单元测试

yarn test:unit

效果预览:

更多请查看:https://cli.vuejs.org/zh/guide/

使用Vue-cli 3.x搭建Vue项目的更多相关文章

  1. 前端——Vue CLI 3.x搭建Vue项目

    一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若 ...

  2. [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍

    一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...

  3. 基于vue cli 3.0创建前端项目并安装cube-ui

    前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...

  4. vue cli 3.0快速创建项目

    本地安装vue-cli 前置条件 更新npm到最新版本 命令行运行: npm install -g npmnpm就自动为我们更新到最新版本 淘宝npm镜像使用方法 npm config set reg ...

  5. 使用vue/cli 创建一个简单的项目

    首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...

  6. ubuntu下安装vue/cli提示No command 'vue' found

    通过官方指令 npm install -g @vue/cli 安装vue脚手架提示: No command 'vue' found, did you mean: Command 'vpe' from ...

  7. 让我们用Vue cli全家桶搭建项目

    一般项目都会用到这几个,这里不在详细介绍概念,只是简单的使用.一.搭建cli 1.事先安装好cnpm(淘宝镜像) npm install -g cnpm --registry=https://regi ...

  8. Django+Vue.js框架快速搭建web项目

    一.vue环境搭建1.下载安装node.js.2.安装淘宝镜像cnpm,在命令窗口输入: npm install -g cnpm --registry=https://registry.npm.tao ...

  9. vue.js---利用vue cli脚手架工具+webpack创建项目遇到的坑

    1.Eslint js代码规范报错 WARNING Compiled with 2 warnings 10:43:26 ✘ http://eslint.org/docs/rules/quotes St ...

  10. vue + cesium开发(5) 搭建 vue + cesium开发环境(2)

    上vue+cesium开发(1)中,没有进行配置webpack,而是使用了插件进行代替,在使用过程中出现了一些未知BUG,影响体验,因此参考了官方文档对项目进行重新配置,使用了 copy-webpac ...

随机推荐

  1. 简单的使用git克隆上传创建下载删除

    首先我们下载个git 官网:https://git-scm.com/ 我这里下的是64-bit windows setup 下载完成后安装: 一直下一步就好 安装完成后进行打开! 现在我们需要去官网注 ...

  2. Notepad++ 插件之 TextFX (安装及作用)

    <安装:打开 notepad++  插件 -> Plugin Manager -> Show Plugin Manager -> available ->选中 TextF ...

  3. 如何打卡后缀为3ds的文件

    打开.3DS文件 3DS文件怎么打开? 用它吧:a3dsviewer,顾名思义,一个3D文件浏览工具,为用户提供一个快速和简单的3DS文件浏览器很容易. 这里是一些主要特点的“a3dsviewer”: ...

  4. ng-repeat 指令(带有对象)

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  5. Oracle四舍五入,向上取整,向下取整

    用oracle sql对数字进行操作: 取上取整.向下取整.保留N位小数.四舍五入.数字格式化 取整(向下取整): select floor(5.534) from dual; select trun ...

  6. TabbarController进行模块分类和管理

    iOS-CYLTabBarController[好用的TabbarController]   用TabbarController进行模块分类和管理,这里推荐一个CYLTabBarController, ...

  7. Angularjs基础(五)

    AngularJS Select(选项框) AngularJS 可是使用数组或对象创建一个下拉列表选项.使用ng-options创建选项框 在AngularJS 中我们可以使用ng-option指令来 ...

  8. POJ 1113--Wall(计算凸包)

    Wall Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 40363 Accepted: 13754 Description On ...

  9. 【例题收藏】◇例题·6◇ 电压机制(voltage)

    ◆例题·6◆ 电压机制 周六日常模拟赛……已经不知道该说什么了(感觉做不出来的都是好题) ▷ 题目 (终于不用自己翻译英文题了╮(╯-╰)╭) [问题描述] 科学家在“无限神机”(Infinity M ...

  10. substr在oracle和mysql中的应用和区别

    Oracle: 书写格式: (1)Select  substr(字段名(string) , 起始位置(int) , 截取长度(int)) 示例: selectsubstr('123456',0,3)a ...