vue-cli4搭建脚手架步骤

因为vue轻量级等各种优点,很多项目需要搭建vue脚手架,接下来我们就分享一下搭建脚手架的步骤

搭建脚手架需要了解前端的相关知识 html css js Node.js 环境(npm 包管理工具) webpack 自动构建工具

一、安装 node.js 进入官网 https://nodejs.org/zh-cn/
vue-cli4搭建脚手架步骤_第1张图片
二、安装 cnpm

1、npm(node package manager)是nodejs 的包管理器,用于node 的插件管理(包括安装、卸载、管理依赖等)
2、使用npm 安装插件: 命令提示符 执行 npm install <name>
3、因为npm安装插件是从国外服务器下载,受网络的影响比较大,可能会出现异常,如果npm的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这事。来自官网:“这是一个完整 npmjs.org 镜像,你可以用此代替官方版本(只读),同步频率目前为 10分钟 一次以保证尽量与官方服务同步。”
 安装:npm install -g cnpm --registry=https://registry.npm.taobao.org
 输入 cnpm -v  可以查看当前版本
 yarn  是个包管理器,是 facebook 发布的一款取代npm 的包管理器工具  

三、安装 vue-cli 脚手架

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。
检测是否安装脚手架 vue -V 回车看是否安装

1、安装脚手架   输入命令  cnpm  install -g  vue/cli@版本号   (-g是代表全局,如果只安装当前目录就不要用)
2、卸载脚手架  输入命名  npm uninstall  -g  vue-cli@版本号

如果是 3.0以下版本 是 npm install -g vue-cli@版本号
如果是 3.0以上下版本 是 npm install -g @vue/cli@版本号

四、创建项目

1、vue  create  项目名称      例如: vue create vue-app

2、选择自动配置或者手动配置 选择项目配置
vue-cli4搭建脚手架步骤_第2张图片

3、空格选择相关配置
vue-cli4搭建脚手架步骤_第3张图片
4、选择路由模式(history模式和 哈希模式 )

项目里面有# 是哈希模式, history模式需要后端配置,一般情况选择 哈希模式
在这里插入图片描述
5、选择指定放着一个文件,还是放指定文件
vue-cli4搭建脚手架步骤_第4张图片
6、是否保存当前配置
在这里插入图片描述
选y

7、开始安装搭建项目
vue-cli4搭建脚手架步骤_第5张图片
8、启动项目 localhost:8080/

作者:水晶草

你可能感兴趣的:(vue)