4

vue-脚手架安装流程

 2 years ago
source link: https://segmentfault.com/a/1190000040955151
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

  • 停止重新来
  • 换一个网继续重来
  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-demo

yarn serve
# 或 npm run serve
  1. 绿色进度条显示成功!

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK