关于vue.js:vue脚手架安装流程

webpack 本人配置环境繁琐

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

概念

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

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

益处

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

步骤

1. 全局装置 @vue/cli 模块包

yarn global add @vue/cli
# OR
npm install -g @vue/cli

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

• 进行从新来
• 换一个网持续重来

2. 查看 Vue 命令版本

vue -V

总结: 如果呈现版本号就装置胜利, 否则失败

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

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

步骤

1. 创立我的项目

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

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

2. 抉择模板

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

​

3. 抉择包管理器! User Yarn
4. 期待下载脚手架我的项目, 须要的依赖包(此过程会有些漫长 …)

5. 终端切换脚手架我的项目下, 启动内置的 ==webpack 热更新开发服务器 ==

cd vuecil-demo

yarn serve
# 或 npm run serve

6. 绿色进度条显示胜利!