1.下载node最新稳定版本，并且安装

2.安装好之后，在cmd或者terminal下， 使用npm -v 查看当前npm版本，验证是否安装成功

3.安装成功后，运行 npm i -g @vue/cli 来安装 vue3.0脚手架。安装成功后使用 vue -V查看当前版本，验证是否安装成功

4.vue-cli搭建基础项目： 以搭建一个项目名称为vue-test的vue前端项目为例

5.在终端下输入以下命令 ： vue create + 你的项目名称

6.根据提示进行相应的配置，选取必要的模块

 

7.选择项目需要的一些特性（此处我们选择需要Babel编译、使用Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化）

 

8.选择路由模式，在这里我们选择兼容性比较好的哈希模式

 

9.选择css预处理语言，在这里我们选择兼容广泛的stylus

 

10.选择ESlint代码规范，此处使用standard代码规范

 

11.选择何时启用lint格式化，在这里我们选择保存的时候

 

12.配置信息分开保存还是单独一个文件保存，我们选择分开保存

 

13.是否将当前设置作为预设，选择否

 

14.项目生成中

 

15.配置完成后Vue-cli完成初始化

 

16.初始化完成后，根据提示进入到vue-test项目中，并启动项目

17.   进入到vue-test项目cd vue-test

       启动服务npm run serve

       打包编译npm run build

 

vue3.0脚手架 创建项目的更多相关文章

  1. vue-cli3.0 脚手架搭建项目的过程详解

    1.安装vue-cli 3.0 ? 1 2 3 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) ...

  2. 七天接手react项目 系列 —— react 脚手架创建项目

    其他章节请看: 七天接手react项目 系列 react 脚手架创建项目 前面我们一直通过 script 的方式学习 react 基础知识,而真实项目通常是基于脚手架进行开发. 本篇首先通过 reac ...

  3. Vue.js用脚手架创建项目

    安装全局脚手架 cnpm install vue-cli -g vue --version 用脚手架创建项目 创建项目 运行项目 停止项目:Ctrl+C 修改端口 config - index.js ...

  4. Koa 脚手架创建项目

    Koa 脚手架创建项目 通过应用 koa 脚手架生成工具 可以快速创建一个基于 koa2 的应用的骨架 全局安装koa npm install koa-generator -g //必须安装到全局 创 ...

  5. vue-cli 3.0脚手架创建vue项目

    1. 卸载vue-cli 2.0 npm uninstall -g vue-cli 2. 安装vue-cli 3.0 npm install @vue/cli 3. 创建项目 npm create & ...

  6. Vue3.0脚手架搭建

    https://www.jianshu.com/p/fbcad30031c2 vue3.0官网:https://cli.vuejs.org/zh/guide/ 介绍: notice: 这份文档是对应 ...

  7. 使用vue-cli脚手架创建项目

    ue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目. GitHub地址是:https://github.com/vuejs/vue-cli 一.安 ...

  8. 小白6步搞定vue脚手架创建项目

    1.安装node及npm node -v (测试node是否安装成功)npm -v(测试npm是否安装成功) 2.安装cnpm npm install -g cnpm --registry=http: ...

  9. vue-cli3.0 脚手架搭建项目

    1.安装vue-cli 3.0 npm install -g @vue/cli # or yarn global add @vue/cli 安装成功后查看版本:vue -V(大写的V) 2.命令变化 ...

随机推荐

  1. 控件setText与setValue赋值顺序先后区别

    1.text与value设置不同的值一定要先赋值 value后赋值text, 否则全为value值 2.若只setValue,则getValue 与 getText获取的值全为value值 $('#t ...

  2. python 问题解决：UnicodeEncodeError: 'ascii' codec can't encode character u'\uff08'

    第一种方案(90%情况下,大部分帖子都是这个)一般报错到代码都是自己写到代码,代码上添加 import sysreload(sys)sys.setdefaultencoding('utf-8') 第二 ...

  3. 【leetcode算法-简单】35. 搜索插入位置

    [题目描述] 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引.如果目标值不存在于数组中,返回它将会被按顺序插入的位置. 你可以假设数组中无重复元素. 示例 1: 输入: [1,3,5, ...

  4. 1、html的concept（概念）和三大基石

    概念:      HMTL:超文本标记语言 作用:      HTML是告诉浏览器接收到的数据使用什么样的数据组织形式进行显示使用:     HTML的规则 1.文件后缀名              ...

  5. K8S从入门到放弃系列-(5)kubernetes集群之kube-apiserver部署

    摘要: 1.kube-apiserver为是整个k8s集群中的数据总线和数据中心,提供了对集群的增删改查及watch等HTTP Rest接口 2.kube-apiserver是无状态的,虽然客户端如k ...

  6. TypeScript 类型推导及类型兼容性

    类型推导就是在没有明确指出类型的地方,TypeScript编译器会自己去推测出当前变量的类型. 例如下面的例子: let a = 1; 我们并没有明确指明a的类型,所以编译器通过结果反向推断变量a的类 ...

  7. 关于mq的思考

    解耦场景 spark 发告警,同过kafka来解耦 削峰场景 日志采集生产环境几百台,当后续数量持续增加时,如果不加消息队列或者内存队列,可能把数据库打死 一个中间件: 为什么用 ->解决什么问 ...

  8. sql语句分页多种方式

    sql语句分页多种方式ROW_NUMBER()OVER sql语句分页多种方式ROW_NUMBER()OVER 2009年12月04日 星期五 14:36 方式一 select top @pageSi ...

  9. 货币转换C

    描述 人民币和美元是世界上通用的两种货币之一,写一个程序进行货币间币值转换,其中:‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮ ...

  10. 2、JDK8中的HashMap实现原理及源码分析

    本篇提纲.png 本篇所述源码基于JDK1.8.0_121 在写上一篇线性表的文章的时候,笔者看的是Android源码中support24中的Java代码,当时发现这个ArrayList和Linked ...