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. rest_framework之ModelViewSet、路由控制、序列化组件快速搭建项目雏形

    以UserInfo表登陆接口为例 ModelViewSet的用法十分简单,定义一个视图类,指定一个模型表,指定一个序列化类即可帮我们完成增删改查等功能 示例: # 视图层 from app01.MyS ...

  2. 超级块，i节点，数据块，目录块，间接块

    一.物理磁盘到文件系统 文件系统用来存储文件内容,文件属性,和目录,这些类型的数据如何存储在磁盘块上的呢?Unix/linux使用了一个简单的方法. 他将磁盘分为3个部分: 超级块,文件系统中第一个块 ...

  3. APP 和小程序中通过日期格式获取时间戳的一个bug

    介绍一下背景:业务逻辑就不多说了,就说关键出问题的一步,需要将 2019-10-10 这个格式转换为时间戳.在不同平台不同场景下问题还很怪异 app上:ios 安卓线上的都有问题  ios模拟器没问题 ...

  4. Jmeter进行接口流程测试

    Jmeter进行简单的流程测试 此次完成的流程:添加文章-删除文章 总的如下: 一.测试计划 用户定义的变量中,我定义了3个变量: 二.HTTP cookie管理器 填写要添加的cookie 三.JD ...

  5. PAT甲级 图的遍历 相关题_C++题解

    图的遍历 PAT (Advanced Level) Practice 图的遍历 相关题 目录 <算法笔记>重点摘要 1021 Deepest Root (25) 1076 Forwards ...

  6. 搭建apache2.4+php7+mysql+phpmyadmin

    apache2.2不支持php7,会报错 cannot load php7apache2_4.dll into server 前排提示:保证安装文件夹和我的一致可以省事很多哦 下载地址 下载apach ...

  7. python学习-26 函数作用域

    举例说明: 1. name = 'john' def foo(): name = 'xiaomming' def bar(): print(name) return bar a=foo() print ...

  8. 下载GDB调试工具peda

    命令: 1.git clone https://github.com/longld/peda.git ~/peda 2.echo "source ~/peda/peda.py" & ...

  9. aliplay获取播放时长

    <div id="player-con" class="frequency-pic"></div> <link rel=" ...

  10. LeetCode 1047. Remove All Adjacent Duplicates In String

    1047. Remove All Adjacent Duplicates In String(删除字符串中的所有相邻重复项) 链接:https://leetcode-cn.com/problems/r ...