本章目录
前言
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,我们可以通过 vue-cli 这种脚手架工具来快速搭建vue项目。
vue-cli 里存放了很多常用的项目骨架,直接拿来就可以搭建出一个拥有比较成熟项目结构的项目。下面我们来看看vue-cli项目有那些搭建方法以及vue目录的详细介绍。
一、安装node.js
要想使用 vue-cli,得先安装 node.js。
node.js 是一个可以让前端运行在 node.js 提供的服务器上的一个工具,换句话说,就是提供了一个服务器。
1、下载安装node
node官网:https://nodejs.org/zh-cn/
点击选择长期支持版下载,node的安装很简单,这里就不多说明了,一直点next就好了。
2、配置环境变量
如果下载的是后缀名为.msi的安装包的话,node的环境变量在安装的时候已经配置好了;如果下载的是后缀名为.zip的压缩包文件的话,还需要配置下环境变量。
在path下添加node的目录就好了。我的路径是:D:\nodejs\
3、验证
在命令提示符下输入 node -v
以及 npm -v
(npm是安装的包管理工具)
这个地方我还输入了cnpm -v
,也就是我还安装了cnpm。安装cnpm的原因是因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,所以就安装了淘宝所提供的cnpm。
下面是cnpm的安装命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
nodejs安装成功
二、安装vue-cli
1、vue cli有2.0和3.0版本之分
vue cli3.0版本和vue cli2.0版本的区别,请参考下面博客:
vue-cli版本(2.0,3.0)与 vue版本(2.x,3.x):https://www.jianshu.com/p/157b2d5c35a4
2、卸载vue-cli版本
Vue cli的2.x和3.x的卸载方法,请参考下面博客:
vue-cli 安装,卸载,安装指定版本,和创建项目问题相关整理:https://blog.csdn.net/shi851051279/article/details/84928798
3、全局安装vue-cli
首先全局安装webpack
npm install -g webpack //安装成功后输入`webpack -v`出现版本号
npm install webpack webpack-cli -g //安装 webpack-cli 依赖
然后再全局安装vue-cli
npm install --global vue-cli //安装成功后输入`vue -V`出现版本号
- npm:指明使用 node.js 的命令。
- install:安装
- vue-cli:要安装的工具
- –global:全局安装
测试下vue-cli是否安装成功,运行如下命令(注意最后的 V 是大写):
vue -V
最后,初始化vue(不然在创建项目时会报错),在终端输入以下命令:
npm install -g @vue/cli-init
三、使用命令搭建vue-cli项目
在终端中运行 cd 命令,进入想要创建项目的目录位置 。比如我们想把工程创建在 D盘中 D:\VSCode\space 目录下,首先在命令控制台中进入到这个文件夹。接着执行如下命令:
vue init webpack bloghtml //最后一个参数是自定义的项目名称,我这里命名为:bloghtml
等一会控制台会出现一些配置参数让你选择,基本默认就可以了。
? Project name vue-demo # 项目名称,直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters),阮一峰老师博客为什么文件名要小写 ,可以参考一下。
? Project description A Vue.js project # 项目描述,随便写
? Author # 作者名称
? Vue build standalone # 我选择的运行加编译时
Runtime + Compiler: recommended for most users
? Install vue-router? Yes # 是否需要 vue-router,路由肯定要的
? Use ESLint to lint your code? Yes # 是否使用 ESLint 作为代码规范.
? Pick an ESLint preset Standard # 一样的ESlint 相关
? Set up unit tests Yes # 是否安装单元测试
? Pick a test runner 按需选择 # 测试模块
? Setup e2e tests with Nightwatch? 安装选择 # e2e 测试
? Should we run `npm install` for you after the project has been created? (recommended) npm
四、使用vue ui搭建vue-cli项目
@vue/cli3.0增加一个可视化项目管理工具,全局安装完成cli3.0之后,可以直接在cmd输入命令:vue ui 启动即可,地址默认是:http://localhost:8000
运行命令 vue ui , 就会启动一个本地服务,下面是vue ui的界面:
创建新项目
选择手动预设
除了默认的功能外选择router、vuex。
然后在配置中选择ESLint + Standard config。
最后创建项目,下面是项目创建成功界面。