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. 综合练习2 设置访问权限，Easy-IP访问外网，内外网访问

    实验拓扑图: 实验要求: 1.pc.路由.交换基本配置,vlan间路由互通. 2.vlan20.vlan30可以访问FTP,VLAN10不允许访问FTP. 3.AR1通过easy-ip方式实现私网地址 ...

  2. nginx目录学习

    目录 一. Nginx 基础知识 二. Nginx 安装及调试 三. Nginx Rewrite 四. Nginx Redirect 五. Nginx 目录自动加斜线: 六. Nginx Locati ...

  3. mysql 开启log-bin功能

      今天搜索了一下增量备份脚本,简单查了一下,增量备份是通过mysql binlog来做的,就是将某段时间内的操作,保存到某二进制日志当中.备份就是备这个日志,恢复也是通过它.然鹅,这里我们需要先开启 ...

  4. subplot()一个窗口画多个图

    import matplotlib.pyplot as plt plt.subplot(m,n,p) m,n表示一个窗口上显示m行n列 p表示正在处理第p个区域的部分(区域编号从左到右,从上到下) f ...

  5. Memory Barriers Are Like Source Control Operations

    From:   http://preshing.com/20120710/memory-barriers-are-like-source-control-operations/ If you use ...

  6. java多线程上篇（三） -- 进程通信和线程死锁简单介绍

    进程通信指的是进程间的信息交换 ,IPC(Inter-Process Communication,进程间通信) 进程通信就相当于一种工作方式.沟通形式,进程通信主要指的就是操作系统提供的进程通信工具( ...

  7. HTML 是什么？

    HTML 指的是超文本标记语言(英语:HyperText Markup Language),是用来描述网页的一种语言. HTML 不是一种编程语言,而是一种标记语言,它有一套标记标签 . HTML 使 ...

  8. jquery绑定input的change事件

    ### jquery绑定input的change事件 背景:在做一个登录页时,如果用户未输入验证码则无法点击登录按钮,所以想到了用input的change事件,但是在写完后发现无法监听input值的改 ...

  9. 2019java学习路线图

    学习路线图往往是学习一样技术的入门指南.网上搜到的Java学习路线图也是一抓一大把.但是很多学习路线图总结的云里雾里,也没有配套的视频,学习效果并不好. 分享一个完整的Java学习路线图给大家,也是贴 ...

  10. zookeeper-data

    1. The ZooKeeper Data Model 1.1 ZNodes Znodes maintain a stat structure: The Stat structure for each ...