1.安装vue-cli 3.0

npm install -g @vue/cli

# or

yarn globaladd @vue/cli

安装成功后查看版本:vue -V(大写的V)

 
 

2.命令变化

vue create --help

用法: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 (仅用于 npm 客户端)

-g, --git [message]            强制 / 跳过 git 初始化,并可选的指定初始化提交信息

-n, --no-git                    跳过 git 初始化

-f, --force                    覆写目标目录可能存在的配置

-c, --clone                    使用 git clone 获取远程预设选项

-x, --proxy                    使用指定的代理创建项目

-b, --bare                      创建项目时省略默认组件中的新手指导信息

-h, --help                      输出使用帮助信息

3.创建项目

去到指定目录下创建项目(project-name:项目名称)

vue create project-name

 
 

my-default 是 我原来保存好的模板;

default 是 使用默认配置

Manually select features 是 自定义配置

 
 

4.选择配置(自定义配置)

 
 

5.选择css预编译,这里我选择less

? Please pick a preset: Manuallyselect features? Check the features neededforyour project: Router, Vuex, CSS Pre-processors, Linter, Unit? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported bydefault):

SCSS/SASS

> LESS

Stylus

6.语法检测工具,这里我选择ESLint + Standard config

? Please pick a preset: Manuallyselect features? Check the features neededforyour project: Router, Vuex, CSS Pre-processors, Linter, Unit? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported bydefault): Stylus? Pick a linter / formatter config: (Use arrow keys)

ESLint with error prevention only

ESLint + Airbnb config

> ESLint + Standard config

ESLint + Prettier

7.选择语法检查方式,这里我选择保存就检测

? Please pick a preset: Manuallyselect features? Check the features neededforyour project: Router, Vuex, CSS Pre-processors, Linter, Unit

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported bydefault): Stylus

? Pick a linter / formatter config: Prettier

? Pick additional lint features: (Press toselect, to toggle all, to invert selection)

>( ) Lint on save                     // 保存就检测

( ) Lint and fix on commit       // fix和commit时候检查

8.接下来会问你把babel,postcss,eslint这些配置文件放哪,这里随便选,我选择放在独立文件夹

? Please pick a preset: Manuallyselect features

? Check the features neededforyour project: Router, Vuex, CSS Pre-processors, Linter, Unit

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported bydefault): Stylus

? Pick a linter / formatter config: Prettier

? Pick additional lint features: Lint on save

? Pick a unit testing solution: Jest? Wheredoyou prefer placing configforBabel, PostCSS, ESLint, etc.

? (Use arrow keys)

> In dedicated config files// 独立文件放置

In package.json// 放package.json里

9.键入N不记录,如果键入Y需要输入保存名字,如第一步所看到的我保存的名字为my-default

? Please pick a preset: Manuallyselect features

? Check the features neededforyour project: Router, Vuex, CSS Pre-processors, Linter, Unit

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported bydefault): Stylus

? Pick a linter / formatter config: Prettier

? Pick additional lint features: Lint on save

? Pick a unit testing solution: Jest

? Wheredoyou prefer placing configforBabel, PostCSS, ESLint, etc.

? In dedicated config files

? Savethisasa presetforfuture projects? (Y/n)// 是否记录一下以便下次继续使用这套配置。

10.确定后,等待下载依赖模块

11.项目创建好后

cd project-name// 进入项目根目录run serve// 运行项目

12.浏览器打开  http://localhost:8080

vue-cli3.0 vue脚手架3.0的使用的更多相关文章

  1. Vue CLI3和Vue CLI2环境搭建

    关于 Vue CLI 旧版本的安装以及创建项目 1.搭建 vue 的开发环境 ,安装 vue 的脚手架工具 官方命令行工具 npm install --global vue-cli / cnpm in ...

  2. Vue项目用了脚手架vue-cli3.0,会报错You are using the runtime-only build of Vue where the template compiler is not available.....

    摘自: https://blog.csdn.net/wxl1555/article/details/83187647 报错信息如下图: 报错原因是:vue有两种形式的代码:一种是compiler(模版 ...

  3. Vue CLi3入门

    摘自:https://www.jianshu.com/p/cf9b56efd3b8 Vue CLi3入门 12018.11.15 14:16:17字数 1222阅读 8895 地址 Vue CLi3 ...

  4. vue cli3.0 结合echarts3.0和地图的使用方法

    echarts 提供了直观,交互丰富,可高度个性化定制的数据可视化图表.而vue更合适操纵数据. 最近一直忙着搬家,就没有更新博客,今天抽出空来写一篇关于vue和echarts的博客.下面是结合地图的 ...

  5. 解决vue/cli3.0 语法验证规则 ESLint: Expected indentation of 2 spaces but found 4. (indent)

    当你使用vue/cli3.0的时,有可能出现雁阵规则 ESLint: Expected indentation of 2 spaces but found 4. (indent) 解决方法 1.在vu ...

  6. 01-路由跳转 安装less this.$router.replace(path) 解决vue/cli3.0语法报错问题

    2==解决vue2.0里面控制台包的一些语法错误. https://www.jianshu.com/p/5e0a1541418b 在build==>webpack.base.conf.j下注释掉 ...

  7. vue cli3.0打包

    1.vue cli3.0需要在项目根目录下配置webpack  包括反向代理以及打包文件路径 const webpack = require("webpack"); module. ...

  8. vue cli3.0快速搭建项目详解(强烈推荐)

    这篇文章主要介绍下vue-cli3.0项目搭建,项目结构和配置等整理一下,分享给大家. 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cl ...

  9. vue cli3.0 首次加载优化

    项目经理要求做首页加载优化,打包后从十几兆优化到两兆多,记下来怕下次忘记 运行report脚本 可看到都加载了那些内容,在从dist文件中index.html 查看首次加载都加载了那些东西,如下图:然 ...

  10. 使用VUE CLI3.0搭建项目vue2+scss+element简易版

    1.安装Vue CLI 3 //三选一即可cnpm install -g @vue/cli npm install -g @vue/cli yarn global add @vue/cli 注意: 1 ...

随机推荐

  1. tensorboard报错:AttributeError: ‘Value’ object has no attribute ‘metadata’

    tensorboard的网页可以访问,但是只能观察到graph数据,但是观察不到scalars数据. 原因:tensorflow版本需>=1.3.0 解决方法:升级tensorflow

  2. python3.2求和与最值

    #1到100求和sum1=0for x in range(101): sum1=sum1+xprint(sum1) #1到100偶数求和sum2=0for x in range(0,101,2): p ...

  3. 018_go语言中的结构体

    代码演示 package main import "fmt" type person struct { name string age int } func main() { fm ...

  4. 在图像中隐藏数据:用 Python 来实现图像隐写术

    什么是“隐写术”? 隐写术是将机密信息隐藏在更大的信息中,使别人无法知道隐藏信息的存在以及隐藏信息内容的过程.隐写术的目的是保证双方之间的机密交流.与隐藏机密信息内容的密码学不同,隐写术隐瞒了传达消息 ...

  5. 【AKKA干货】AKKA-HTTP(JAVA版)踩坑记

    因为不会屎克拉,所以只能使用java版本. 国内AKKA的中文资料实在太少,想要找解决方案真心头大. 特别是对我这种英文差的小白来说实在痛苦. ============================ ...

  6. MyBatisPlus乐观锁,乐观锁竟然如此简单

    乐观锁 在便是过程中,我们经常会被问到乐观锁,悲观锁,都非常简单 乐观锁:顾名思义,思想十分乐观,总是认为不会出现问题,无论什么都不去上锁!如果出现了问题,就再更新测试 悲观锁:顾明思义,思想十分悲观 ...

  7. 论文结果图:matplotlib和seaborn实现

    在论文中,可视化结果往往很重要,毕竟文字太抽象,需要图片向审稿人直观的展现出我们的结果.我也写了俩篇论文和一篇专利的申请,其中也有一些画图的程序,因此记录,防止以后忘了.由于篇幅原因,文章就不贴代码, ...

  8. Windows下使用命令行编译Qt项目(解决DLL丢失问题)

    一.前言 我之前用Qt做了个hello world,结果各种报错,一大堆DLL找不到,今天用命令行编译就通过了 二.准备工作 1.Visual Studio(有nmake就行) 2.Qt 3.把qma ...

  9. 一篇文章快速搞懂什么是GitHub

    导读:什么是GitHub?Git与GitHub之间是什么关系?我们为什么需要版本控制系统?GitHub如何使用?本文将带你一探究竟. 本文字数:1710,阅读时长大约:13分钟 一.什么是版本控制 按 ...

  10. C#LeetCode刷题-图

    图篇 # 题名 刷题 通过率 难度 133 克隆图   18.7% 中等 207 课程表   40.0% 中等 210 课程表 II   40.0% 中等 310 最小高度树   29.5% 中等 3 ...