安装之前请先了解一下各个部分的作用,如果已经掌握,可以直接跳到第二部分。
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js
是一个基于 Chrome JavaScript 运行时建立的一个平台。
Node.js
是一个事件驱动 I/O 服务端 JavaScript 环境,基于 Google 的 V8 引擎,V8 引擎执行 Javascript 的速度非常快,性能非常好。
借用Node.js
的能力可以实现很多强大的功能,在此基础上产生了一系列管理工具,其中就包括NPM
。
官方网站:https://nodejs.org/
NodeJS中文网:http://nodejs.cn/
NodeJS教程:https://www.runoob.com/nodejs/nodejs-tutorial.html
NPM
是随同NodeJS
一起安装的包管理工具,能解决NodeJS
代码部署上的很多问题,常见的使用场景有以下几种:
在用Vue
构建大型应用时推荐使用NPM
安装。NPM
能很好地和诸如webpack或Browserify模块打包器配合使用。同时Vue
也提供配套工具来开发单文件组件。
NPM官方网站:https://www.npmjs.com/
NPM使用介绍:https://www.runoob.com/nodejs/nodejs-npm.html
Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的界面,Vue 都可以胜任。
在用Vue
构建大型应用时推荐使用NPM
安装。NPM
能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时Vue
也提供配套工具来开发单文件组件。
官方网站:https://vuejs.org/
中文官方:https://cn.vuejs.org/
版本下载:https://cdn.jsdelivr.net/npm/vue/dist/
当年用visual studio开发c++,创建项目后环境自动生成所需的目录、配置文件等,开发时根据其规则开发就行了,开发完毕后打包生成exe。
脚手架Vue CLI
是一个基于Vue.js
进行快速开发的完整系统,其目的与VS差不多,自动生成一套东西,按照这个开发,最后用webpack
打包,所以Vue CLI
适合大项目使用,小项目引入个js就完事了。
Vue 提供的这个官方 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架。它为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载、保存时 lint 校验,以及生产环境可用的构建版本。更多详情可查阅Vue CLI
的文档。
本质上,webpack
是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当webpack
处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。
官方网站:https://webpack.js.org/
中文网站:https://www.webpackjs.com/
以往开发网站,需要自己编写大量样式表,网上找不同的组件库为己所用,费时费力,兼容性还可能出问题,而目前网上有大量贡献者开发了各类组件库,Element Plus
就是其中最流行的库,拿来就用。
Element Plus
是一套采用Vue 3.0
作为基础框架实现的组件库,一套为开发者、设计师和产品经理准备的基于Vue 3.0
的组件库,提供了配套设计资源,帮助网站快速成型。
其中内涵了各种组件及主题模板,开发类似admin后台的应用时最为合适。
使用Vue 2.0
开发的为Element UI
,使用Vue 3.0
开发的为Element Plus
。
官方网站:https://element-plus.org/en-US/
中文官方:https://element-plus.org/zh-CN/
上面把各个涉及的部件介绍了一下,如果要深入的话,可以去官方网站学习。
现在开始一步步把安装完成。
官网下载地址:https://nodejs.org/en/
下载后打开安装
可以不选择(建议~~),如果选择了自动安装,那么在完成后系统将自动下载各种所需工具,下面有截图可看。
因为选择了自动安装,所以系统开始把所有所需工具都给装上了。。。
20分钟过后~~~
由于新版的
Node.js
已经集成了NPM
,所以NPM
也一并安装好了,可以开始使用npm
命令行了~~
在国内,使用淘宝的镜像会比较快安装一些包。
设置cnpm
命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
https://registry.npm.taobao.org该网址可更换为更高效的网址。
这样以后就可以使用 cnpm 命令来安装模块了:
cnpm install [name]
因为vue命令去初始化项目的时候实际上还是使用的是npm
去安装各种模块,并没有使用cnpm
,所以还是先将npm
注册淘宝镜像比较快。
注册命令:
npm config set registry https://registry.npm.taobao.org
npm info underscore
如果不设置淘宝镜像,那么每次vue init
初始化的速度将会变得非常慢。
只有安装了脚手架vue-cli,才能使用
vue init
命令初始化vue项目。
npm install --global vue-cli
如果你安装了cnpm
,那么也可使用这个,速度更快。
cnpm install --global vue-cli
如上图,使用--global
选项是因为这样可以在全局下使用vue-cli工具来创建vue项目,而不是要在特定的安装目录下才能使用vue-cli。
vue -V
只需要安装过
vue-cli
,那么每次创建项目可从此命令开始,再次强烈建议先将npm镜像,提高速度。
npm config set registry https://registry.npm.taobao.org
,详细用法参考上面主题:“e)npm注册淘宝镜像”
Project
文件夹下输入命令创建项目Test
此命令可以执行的前提是已经安装了vue-cli
。
vue init webpack Test
系统将提出一些问题,自行输入或选择即可。
test
。A Vue.js project
,可以直接回车不编写,这里改为Only Test
。git
的作者,他会读取。Runtime + Compiler: recommended for most users
回车即可。y
。n
(建议),如果你是大型团队开发,最好是进行配置。n
。n
。npm
。运行初始化命令的时候会让用户输入几个基本的配置选项,如项目名称、项目描述、作者信息,对于有些不明白或者不想填的信息可以一直按回车去填写就好了,等待一会,就会显示创建项目创建成功,如下图:
本例配置完成后清单如下:
? Project name test //项目名称
? Project description Only Test // 项目描述
? Author // 作者名称
? Vue build standalone // 推荐选前者
? Install vue-router? Yes // 是否安装vue-router路由组件,也可不安装使用第三方或简单的项目自己写
? Use ESLint to lint your code? No // 是否使用eslint管理代码,个人项目不推荐
? Set up unti tests? No // 是否使用karma来做单元测试
? Setup e2e tests with Nightwatch? No // 是否安装e2e测试
? Should we run 'npm install' for you after the project has been created? (recommended) npm // 选择使用npm或yarn进行安装模块
这时候Project
目录下已经生成了一个Test
文件夹,并且各种文件及文件夹已经下载生成完毕。
可以使用HBuilderX、IDEA、VS Code等来运行这个项目了,当然也可以在命令窗口运行,运行命令npm run dev
npm run dev
默认监听8080端口
,服务器己经启动,目前是在开发环境下。
打开浏览器,输入网址:http://localhost:8080
,如果出现vue欢迎页面,则表示正常:
退出监听,直接关闭cmd窗口即可。
到这一步就最简单了,不就是安装个组件么~~,使用命令:
npm install element-plus --save
简写
npm i element-plus --S
但是有可能失败~~
想起来为什么么了吗?因为我们在国内啊,需要使用之前配置好的cnpm
命令或者npm
做好了镜像,参考第一步中最后两个“可选”项,这样才能成功。
cnpm install element-plus --save
node_modules
目录下存在element-plus
文件夹。
打开根目录package.json
,找到element-plus
版本号,预示着安装完成。
如果仅下载安装Vue,不需要初始化也不需要脚手架,那么用本方法。
本例中在桌面创建新目录Project/Install
,并在该目录下执行命令
npm install vue
目录如下:
如果项目使用了vue-cli
,那么在其node-modules
目录下也会发现本方法中相同的组件。
在 NPM 包的dist/
目录你将会找到很多不同的Vue.js
构建版本。
Vue 2.0
之间的差别:UMD | CommonJS | ES Module | |
---|---|---|---|
完整版 | vue.js | vue.common.js | vue.esm.js |
只包含运行时版 | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js |
完整版 (生产环境) | vue.min.js | - | - |
只包含运行时版 (生产环境) | vue.runtime.min.js | - | - |
Vue 3.0
:参考文档:
npm安装vue
使用NPM安装vue.js(vue-cli)详细教程
HBuilderX创建Vue的elementUI项目
Hbuider中vue项目添加elementui等插件
Element UI 入门课程
单元测试:从 Jest 到 Karma+Mocha+Chai
前端测试框架对比(js单元测试框架对比)