地址:https://cli.vuejs.org/zh/guide/
安装步骤:
提示:node 版本要 8.9+

  1. 两种方式:
    (1) npm install -g @vue/cli
    (2) yarn global add @vue/cli
    安装完成之后检查 vue --version/ vue -V 检查版本
  2. npm install -g @vue/cli-service-global
  3. 创建项目
    vue create hello-world // 项目名称

终端:(上下键选择)

default (bable,eslint) // 默认
Manually select features // 手动 **选择手动创建项目

回车
终端:(上下键移动键,空格键是否选中)
Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project:

() Babel
( ) TypeScript // 语法
( ) Progressive Web App (PWA) Support // PWA
(
) Router // 路由
(* ) Vuex // store
( ) CSS Pre-processors // 预编译
(
) Linter / Formatter // 格式化代码
( ) Unit Testing
( ) E2E Testing
//提示: Babel, Router, Vuex, CSS Pre-processors, Linter 选中

回车
终端:
Vue CLI v3.0.5
? Please pick a preset: Manually select features // 手动创建项目
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
//在生产中需要适当的服务器设置用于索引回退
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
// css 预编译
? Pick a linter / formatter config: Prettier // (ESLint + Prettier)格式化程序配置
? Pick additional lint features: Lint on save // 保存即检查格式
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
// 其他配置数据单独存放再一个配置文件内
? Save this as a preset for future projects? Yes
// 是否保存这个项目的配置
? Save preset as: SaveVue3.0
// 是的话 项目命名假设为:SaveVue3.0

命令:

  1. 使用图形化界面
    vue ui
    图形化数据
  2. yarn serve 启动项目
  3. yarn build 打包项目
    (4,5,6 不可同时执行)
  1. // vscode 代码检测设置
    文件 ~ 首选项 ~ 设置 ~ 工作区
    {
    "editor.formatOnSave": false,
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
    "javascript",{
    "language": "vue",
    "autoFix": true
    },
    "html",
    "vue"
    ]
    }
    vscode 加载插件 ESLint // 代码检测工具

vue-cli 3 脚手架搭建(create)的更多相关文章

  1. vue环境配置脚手架搭建,生命周期,钩子

    Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...

  2. 【vue】---- 新版脚手架搭建项目流程详解

    一.概述 本文将介绍vue项目完整的搭建流程,在使用新版本的脚手架基础上,进行了一系列的完善和配置.主要内容如下: 1.项目初始化 安装脚手架 创建项目 项目结构 2.项目搭建配置 引入第三方插件 路 ...

  3. vue简单的脚手架搭建项目

    第一步 node环境安装 1.如果本机没有安装node运行环境,下载node安装包进行安装 下载地址:https://nodejs.org/en/或者http://nodejs.cn/ 第二步 nod ...

  4. 前端——Vue CLI 3.x搭建Vue项目

    一.Node安装 windows 1. Node.js (>=8.9, 推荐8.11.0+) Node官网下载 .msi 文件,按步骤下载安装即可. 安装完之后在cmd中输入 node -v,若 ...

  5. vue cli创建脚手架

    1.用vscode打开一个文件夹.在菜单栏 点击 查看-集成终端.这里可以用其他的方法比如cmd命令符调开这个界面,但是要用cd 切到要放文件的文件夹下. 2.安装好node.js  和淘宝镜像 3. ...

  6. 让我们用Vue cli全家桶搭建项目

    一般项目都会用到这几个,这里不在详细介绍概念,只是简单的使用.一.搭建cli 1.事先安装好cnpm(淘宝镜像) npm install -g cnpm --registry=https://regi ...

  7. vue二、脚手架搭建

    1:安装nodeJs(下载一路回车) https://nodejs.org/zh-cn/ 2:检验nodeJs是否安装成功 (注意nodeJs是否添加到window路径中) 进入cmd -> n ...

  8. Vue -cli 入门 --项目搭建(一)

    一. 安装node.js环境. 在node.js官网下载稳定版本(https://nodejs.org/en/) 下载完成后点击安装,安装过程很简单,一直next即可,安装完成会自动添加node及np ...

  9. Vue CLI 3+tinymce 5富文本编辑器整合

    基于Vue CLI 3脚手架搭建的项目整合tinymce 5富文本编辑器,vue cli 2版本及tinymce 4版本参考:https://blog.csdn.net/liub37/article/ ...

  10. vue/cli 3.0脚手架搭建

    在vue 2.9.6中,搭建vue-cli脚手架的流程是这样的: 首先 全局安装vue-cli,在cmd中输入命令: npm install --global vue-cli  安装成功:  安装完成 ...

随机推荐

  1. Runtime.addShutdownHook用法

    一.什么是ShutdownHook? 在Java程序中可以通过添加关闭钩子,实现在程序退出时关闭资源.平滑退出的功能. 使用Runtime.addShutdownHook(Thread hook)方法 ...

  2. BZOJ2780(广义后缀自动机,set启发式合并)

    BZOJ2780(广义后缀自动机,set启发式合并) 题面 自己找去 HINT 就是给多个文本串,然后每次查询的时候问你这个串在多少个文本串中出现过.因为多个文本串,那么直接就往广义后缀自动机上思考啊 ...

  3. laravle中常见的数据库加密

    // 1.md5加密 $str=md5('123456'); // 2.base64_decode加密 $str2=base64_encode('123456'); // 2.1 base64_解密 ...

  4. Dubbo服务暴露分析

    Dubbo的服务暴露是一个重要的特性,了解其机制很重要.之前有很多人写了有关的源代码分析,在本文中不再重新分析.官方文档中的一篇写的就很好,本文主要是有关内容进行补充与总结. 传送门:服务导出 为什么 ...

  5. 【笔记0-开篇】面试官系统精讲Java源码及大厂真题

    背景 开始阅读 Java 源码的契机,还是在第一年换工作的时候,被大厂的技术面虐的体无完肤,后来总结大厂的面试套路,发现很喜欢问 Java 底层实现,即 Java 源码,于是我花了半年时间,啃下了 J ...

  6. PHP目录操作(附封装好的目录操作函数文件)

    目录函数库常用API $path='test'; var_dump(is_dir($path));//检测是否为目录 echo '<hr/>'; echo getcwd();//得到当前的 ...

  7. 自定义React-redux

    实现mini版react-redux 1. 理解react-redux模块 1). react-redux模块整体是一个对象模块 2). 包含2个重要属性: Provider和connect 3). ...

  8. 【巨杉数据库SequoiaDB】巨杉数据库荣获《金融电子化》“金融科技创新奖”

    巨杉助力金融科技创新 2019年12月19日,由<金融电子化>杂志社主办.北京金融科技产业联盟协办的“2019中国金融科技年会暨第十届金融科技及服务优秀创新奖颁奖典礼”在京成功召开.来自金 ...

  9. IP地址分类及其相关计算问题

    IP地址分类及其相关计算问题 公网IP和子网IP 公网IP: • A类:1.0.0.0 到 127.255.255.255 主要分配 给大量主机而局域网网络数量较少的大型网络 • B类:128.0.0 ...

  10. Structure preserving unsupervised feature selection

    Abstract • 使用自表示模型提取特征间的关系,结构保留约束来保持数据的局部流形结构: 1  Introduction • Contributions: (1)提出基于自表示模型的特征选择: ( ...