vue-cli 3.0x以上版本脚手架搭建流程说明
作者:一只小泰迪
说明:vue-cli 3.x 版本以上脚手架搭建
日期:2020-04-15
一、安装前提
1.Node.js,npm,cnpm,vue,vue-cli,Vue Devtools,webpack相互关系说明
- node.js:是基于Chrome V8 引擎的
JavaScript
运行时环境。 - npm:(全称:
node package manager
):node.js
的包管理器,用于node插件管理(包括安装、卸载、管理依赖等)。可以看成java
项目中使用maven
管理依赖,下载jar
包的功能 - cnpm:因为
npm
安装插件是从国外服务器下载,受网络的影响比较大,可能会出现异常,如果npm
的服务器在中国就好了,所以我们乐于分享的淘宝团队干了这个事情,来自官网“这是一个完整npmjs.org镜像,你可以用此代替官方版本(只读),同步频率目前为10分钟,一次保证尽量与官方服务同步。”(亲自尝试:比npm
快许多) - vue:是一套用于构建用户界面的渐进式框架
- vue-cli:是用于快速
vue.js
开发的完整系统,是vue.js
开发的官方脚手架。包含了1.零配置快速原型;2.提供了运行时依赖;3.提供了更夫的官方插件库;4完整的图形用户界面。 - vue-devtools:是基于
Chrome
浏览器的插件,用于vue
应用的调试,这款vue
调试神器可以极大的提高我们的调试效率。帮助我们快速的调试开发vue
应用 - webpack:是一个依赖于
Node.js
环境运行的,现代JavaScript
应用程序的静态模块打包(module bundler)。webpack
对于前端模块开发的各个模块相互之间的依赖进行解析,递归构建依赖关系,最终打包成一个或少量的可被浏览器识别的静态文件。可以看成maven的打包编译,解析依赖功能。
因此,一个vue项目,想要被最终的浏览器访问,首先得有一个Node.js环境,支持模块化开发;其次需要npm帮忙拉取一些包来复用,组装;最后编译完成,需要webpack依赖于Node环境将整个vue项目打包编译,递归依赖,生成浏览器识别的文件。然后被浏览器访问到。
vue.js开发使用vue-cli脚手架会方便很多,而vue-cli是全局安装的npm软件包,并且npm能很好的和vue的webpack模块打包器配合使用。
2.安装地址以及详情步骤
-
node.js
:下载地址:https://nodejs.org/zh-cn/ -
node.js
:安装详情步骤地址(推荐):https://www.cnblogs.com/lgx5/p/10732016.html安装完成后可查看,查看步骤:
(1).(Windows键 (键盘上的四个小方块)+ R键)之后,输入
cmd
(2).输入`node -v`之后、回车,查看`node`版本
(3).输入`npm -v`之后、回车,查看`npm`版本
![](http://ltdev.uxunsoft.com:4999/server/../Public/Uploads/2020-05-07/5eb35740863d9.png)
cnpm
的安装方法 :在命令行中输入npm install -g cnpm --registry=https://registry.npm.taobao.org
后、回车。如图:
安装完成后,查看安装版本 cnpm -v
后回车,如图:
webpack
的安装:在命令行输入npm install webpack-cli -g
后回车,如图:
安装完成后,查看版本,如图:
至此,安装前提工作准备完成。
二、安装vue-cli脚手架
- 安装
vue-cli
1.x或2.x版本npm install -g vue-cli
(低版本的可忽略,重点是3.0以上版本) - 安装
vue-cli
3.x 以上 版本需要卸载vue-cli
(1.x或2.x),卸载代码npm uninstall vue-cli -g
- 安装
vue-cli
3.x以上版本,在命令行输入npm install -g @vue/cli
后回车。如图:
安装完成后,输入`vue -V`,注意是大写的**V**,回车,查看安装版本:
出现如图:脚手架安装完成。
三、初始化一个项目
介绍两种初始化项目的方法:一种是命令行的方式、一种是vue ui的方式(vue-cli 3.x以上才支持 vue ui 方式)。
1.命令行初始化一个vue项目
从头说起,首先,我们已经全局安装了vue-cli 并且版本为4.2.3,我需要在我的电脑中的F盘初始化一个项目,当然这不是限制死的。项目可以建在各自喜欢的位置。
第一步:打开我的电脑,选择F 盘,新建文件夹myvue
,并且点击进入该文件夹。
第二步:键盘shift键+鼠标右键,再点击红色框标注的PowerShell窗口,之后如下图。
第三步:在命令行中输入创建项目的命令: vue create myapp
,其中myapp是我的项目名称,回车,根据自己的来定。
第四步: 选择需要安装的配置。可通过用上、下键来进行选择,选择完成后进行回车,我选择的是最后一项,手动进行配置。
**第五步:**手动进行配置
**第六步:**选择路由模式
第七步:选择eslint
**第八步:**是否保存预设,这里我选择了N,当然你可以选择Y,以方便后续初始化一个新项目时直接拿来使用
第九步: 等待许久进行安装,安装完成,
第十步: cd myapp
回车,npm run serve
运行,将地址复制进入浏览器,初始化项目完成。在vscode开发工具中打开F盘下的项目文件夹中的项目,就可以看见初始化项目的文件目录了,至此,初始化项目完成。
2.使用vue ui图形化初始化一个项目
第一步:在E盘中新建一个文件夹,名为myappdemo
(名称随个人喜好,小写),Windows键+R键。输入cmd
,进入命令行界面,输入 vue ui
,回车,如图:
**第二步:**点击创建,选择提前准备的文件夹。
**第三步:**配置项目名称,点击下一步
**第四步:**选择预设,在此我选择手动,点击下一步
**第五步:**选择自己需要的配置,点击下一步
**第六步:**路由模式以及eslint标准
**第七步:**点击创建项目时,会提示是否将此设为预设,我选择否,因为我的预设的太多了,当然,你可以设为预设,它就像一个模板一样,方便你下次快速初始化项目。
**第八步:**安装完成,启动项目,并且用开发工具打开项目目录结构。
至此,vue ui初始化项目完成。
初次写文章,还望路过大神指点。。。