webpack本人配置环境繁琐

官网提供脚手架, 疾速搭建我的项目根底构造

概念

脚手架是为了保障各施工过程顺利进行而搭设的工作平台

在代码里的体现, 就是一套固定规范的, 文件夹+文件+webpack配置

益处

  • 开箱即用
  • 0配置webpack
  • babel反对
  • css, less反对
  • 开发服务器反对
    筹备
    装置@vue/cli全局模块包, 失去Vue命令, 当前创立Vue脚手架我的项目

步骤

  1. 全局装置@vue/cli模块包
yarn global add @vue/cli# ORnpm install -g @vue/cli

留神: 如果半天没动静(95%都是网速问题), 能够ctrl c

  • 进行从新来
  • 换一个网持续重来
  1. 查看Vue命令版本
vue -V
总结: 如果呈现版本号就装置胜利, 否则失败

脚手架-创立我的项目-启动服务

用Vue命令, 创立一个脚手架我的项目, 并启动webpack开发服务器

步骤

  1. 创立我的项目

    ==留神: 我的项目名不能带大写字母, 中文和特殊符号==

# vue和create是命令, vuecli-demo是本人的文件夹名vue create vuecli-demo

  1. 抉择模板

    ==能够高低箭头抉择, 回车确定, 默认第二条,间接回车,弄错了ctrl+c从第1步来

  1. 抉择包管理器! User Yarn
  2. 期待下载脚手架我的项目, 须要的依赖包(此过程会有些漫长...)
  1. 终端切换脚手架我的项目下, 启动内置的==webpack热更新开发服务器==
cd vuecil-demoyarn serve# 或 npm run serve
  1. 绿色进度条显示胜利!