基于vue-cli脚手架生成vue项目
一、环境搭建
1、安装nodejs，从node.js官网下载安装，默认一直点下一步即可，输入node -v时，安装成功，新版的nodejs已经集成了npm,通过npm -v查看，如下图所示：
文章图片
2、安装淘宝镜像（cnpm）
(1)输入命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
(2)输入cnpm -v 命令，查看安装结果
cnpm -v
(3)、全局安装vue-cli脚手架
（1）、npm install -g vue-cli 或 cnpm install -g vue-cli
（2）、vue -v//安装完成，查看版本号
二、vue脚手架创建vue项目
1、通过命令vue init webpack 项目名称，注：前面一直默认回车即可，vue-router可安装选【Y】；ESlint是es6语法验证的，如果你勾选可能会出现很多红色的格式要求，博主偷懒所以选择了【N】，哈哈；unit test单元测试、e2e端对端测试，根据个人项目情况选择；后面几默认回车，最后一个选择包管理工具进行下载安装依赖，我们选择npm ,然后他会自动安装依赖。出现的cd vue-first（进入项目目录），npm install (安装项目依赖)，前面已经自动安装了，所以不用手动安装了。
文章图片
2、我们现在cd 到项目vue-first看一下目录结构
文章图片
【基于vue-cli脚手架生成vue项目】3.运行npm run dev即可运行，默认运行在8080端口，在浏览器输入http://localhost:8080即可打开项目页面。
文章图片
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 基于|基于 antd 风格的 element-table + pagination 的二次封装
- 基于爱，才会有“愿望”当“要求”。2017.8.12
- javaweb|基于Servlet+jsp+mysql开发javaWeb学生成绩管理系统
- 如何在手机上查看测试vue-cli构建的项目
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- 韵达基于云原生的业务中台建设 | 实战派
- EasyOA|EasyOA 基于SSM的实现 未完成总结与自我批判
- 基于stm32智能风扇|基于stm32智能风扇_一款基于STM32的智能灭火机器人设计