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. 绿色进度条显示成功!