vue-cli

10.1 vue-cli 简介

vue-cli 是官方提供的一个脚手架,可以快速生成vue的项目模板

主要功能

  • 统一的目录结构
  • 本地调试
  • 热部署
  • 单元测试
  • 集成打包上线

10.2 环境搭建

  • Node.js:http://nodejs.cn/download
    • 一直下一步,安装自己的目录下

确认 Node.js 安装成功

  • node -v 查看版本号
  • npm -v 查看版本号

安装 Node.js 淘宝镜像加速器(cnpm)

# -g 就是全局安装
npm install cnpm -g

# 或使用如下语句解决 npm 速度慢的问题
npm install --registry=https://registry.npm.taobao.org
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated har-validator@5.1.5: this library is no longer supported
C:\Users\Administrator\AppData\Roaming\npm\cnpm -> C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\cnpm
+ cnpm@6.1.1
added 694 packages from 975 contributors in 1494.246s

安装后的位置:

C:\Users\Administrator\AppData\Roaming\npm

安装 vue-cli

cnpm install vue-cli -g

#测试是否安装成功
#查看可以基于哪些模板创建vue应用程序,通常选择webpack
vue list

查看创建vue的模板

C:\WINDOWS\system32>vue list

  Available official templates:

  ★  browserify - A full-featured browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

至此 vue 程序安装完成

10.3 创建vue

创建基于 webpack 模板的 vue 应用程序

# myvue 是项目名称,可以根据自己的需求取名
vue init webpack myvue
  • 安装过程一直no就可以

image-20210413200711272.png

初始化

cd myvue
#安装依赖环境
npm install
#启动当前vue项目
npm run dev

image-20210413202135068.png

项目启动成功

相关文章

一准备工作umi为react的一个封装比较nice的脚手架。优点当然...
webpack在引入两个依赖的包时,可能需要使用shimming,意思是...
  Happypack (plugin)多线程使用loader编译文件treeshaki...
一目录结构├──build//构建相关├──config//配置相关├─...
接着第一节的demo现在我们尝试整合一些其他资源,比如图像,...
webpack的打包原理识别入口文件通过逐层识别模块依赖(Common...