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. jquery-easyui中改变【确认框控件的按钮文字】（$.messager.confirm）

    根据API这句话,就很自然想到重写该方法,代码如下: $.messager.defaults = { ok: "通过", cancel: "不通过" ,widt ...

  2. layuiAdmin （单页版）常见问题与解决方案

    最近项目开发中用到了layuiAdmin的单页版进行开发,期间遇到一些问题,在此总结一二: 单页版缓存问题 由于单页面版本的视图文件和静态资源模块都是动态加载的,所以可能存在浏览器的本地缓存问题,因此 ...

  3. Jira内存调整

    java的metaspce怎么调大 元空间虚拟机控制元空间的增长.但是有些时候我们想限制其增长,比如通过显式在命令行中设置-XX:MaxMetaspaceSize.默认情况下,-XX:MaxMetas ...

  4. VLAN之间通信-三层交换机实现

    1.打开三层交换机的命令行,配置VLAN和设置端口IP enable //进入特权模式 configure terminal //进入全局配置模式 ip routing //启动交换机的路由功能 vl ...

  5. （十三）自定义JSTL标签

    前面的博客,我们讲过了 自定义 el函数 : 讲一个 自定义标签技术 : 目录 自定义标签 快速入门:使用标签输出客户机IP 关于标签处理器类的方法 自定义标签功能扩展 传统标签 简单标签 配置简单标 ...

  6. Turn.js 实现翻书效果(自适应单双页)

    来源:https://www.cnblogs.com/hellman/p/10683492.html在上面的来源基础上增加页码显示,自适应单双页PC端效果: 移动端展示: 源码下载地址:http:// ...

  7. Django路由配置

    Django路由配置系统.视图函数 1.路由配置系统(URLconf) URL配置(URLconf)就像Django 所支撑网站的目录.它的本质是URL与要为该URL调用的视图函数之间的映射表:你就是 ...

  8. pandas之分组计算笔记

    分组计算三部曲:拆分-->应用-->合并 分组:就是按照行或列把相同索引的部分分到一起 分组的关键词为groupby,分组后我们就可以对每组数据进行同一操作,返回的是每组数据分别计算后的结 ...

  9. C语言之反汇编揭秘

    title: 'C语言之反汇编揭秘' tags: 汇编与反汇编 categories: 汇编与反汇编 copyright: true abbrlink: 'b1c9' date: 2019-09-07 ...

  10. codeforce 839d.winter is here

    题意:如果一个子序列的GCD为1,那么这个子序列的价值为0,否则子序列价值为子序列长度*子序列GCD 给出n个数,求这n个数所有子序列的价值和 题解:首先得想到去处理量比较少的数据的贡献,这里处理每个 ...