Node.js webpack Vue-CLI --安装
Node.js 安装
从官网 下载 安装
cmd 命令
node -v 查看版本号 v10.15.0
npm 包管理工具
- npm 是JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。
(类似Python中的pip一样。)
由于新版的nodejs已经集成了npm,所以之前npm也一并安装好了。同样可以通过输入 npm -v 来测试是否成功
- npm 是JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具。
更新npm至最新的稳定版本
- 使用版本 v6.4.1
- npm install npm@latest -g
npm常用命令
- 安装第三方包
npm install 包名
上述命令执行之后将会在当前的目录下创建一个 node_modules 的目录(如果不存在的话),然后将下载的包保存到这个目录下。
npm install 包名 -g
npm install bootstrap@3.3.7
加上-g 参数后就会将该包安装到全局。
使用@ 标识安装指定版本的包,比如指定安装3.3.7版本的Bootstrap。
npm install 包名 -D
安装开发阶段使用的包(有些包只在开发阶段使用,实际生产环境下运行并不需要,比如:代码格式化工
具、代码打包工具等)在我们的项目目录下会生成一个 node_modules 目录,我们使用npm下载安装的项目依赖包都会保存在这个目录中。我们项目的所有的依赖信息都会保存在package.json 文件中。
卸载包
npm uninstall 包名
更新包
npm update 包名
查看已经安装的包
npm list
初始化一个新项目
在你的项目目录下,执行以下命令来初始化你的项目。(会出现很多选项让你填写)
npm init
该命令会在当前目录下创建一个名为package.json 的文件,里面记录下该项目的一些介绍信息和包的依赖
信息。{
"name": "demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
或者你可以简单的使用npm init -y 或npm install --yes 命令使用默认配置来初始化你的项目。
使用cnpm
- 因为npm安装插件是从国外服务器下载,受网络影响大,安装依赖包的时候经常会出现超时的问题。我们可以使
用cnpm 代替npm。
cnpm是淘宝团队维护的一个完整 npmjs.org 镜像,用来代替官方版本(只读),同步频率目前为 10分钟 一次以保证
尽量与官方服务同步。
安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用cnpm
cnpm跟npm用法完全一致,只是在执行命令时将npm改为cnpm
webpack
webpack介绍
前端开发的一个坑在于浏览器加载JS文件的时候是从上到下,不存在模块化这样一个概念的。 我们很正常的会把实现不同功能的代码保存在不同的JS文件中,这些JS文件之间传递变量只能通过定义全局变量,这样我们用到的JS文件越多,暴露的全局变量就越多,越容易出现变量被覆盖的隐患。(如果所有JS文件都是自己写的还好,但是我们通常都是会引用别人的JS文件来开发。)
node.js出现之后,我们的JS文件可以直接跑在操作系统上了,并且在node.js中支持模块化的JS。它通过定义输入和输出来解决不同模块间的数据传递问题。 这里就类似于Python中的包的概念,我们可以在Python文件中使用import 来导入其他的Python包,从而使用这个包中的变量和方法。 这样我们写的js文件就需要提供一个输入和输出。现在的前端开发人员都习惯于在后端先写代码,利用后端开发模块化的方式来解决上面JS的历史遗留问题。可是这样我们写的JS文件浏览器就不认识了,怎么办?webpack 就是一个把我们在后端写的JS代码打包成浏览器认识的JS文件(当然webpack 很强大它可以打包JS、CSS、图片等静态资源)。 我们并不关心打包后的JS文件里面的内容都是什么,只要它体积小、浏览器能认识就可以了。
webpack安装
我们这里安装的是 webpack v4+ 版本,还需要安装CLI工具配合。我们这里安装的是webpack-cli 。执行下面的命令同时安装webpack 和webpack-cli 。
npm install webpack webpack-cli -g -D
npm install webpack webpack-cli -g安装完成后,查看一下webpack 和webpack-cli 的版本信息。
webpack -v
webpack-cli -v
使用webpack打包
cd 到 项目目录下 使用 webpack ./src/b.js
Vue-CLI
Vue-CLI介绍
vue-cli 是一个Vue官方提供的快速构建Vue项目的脚手架工具,能够极大的提高开发效率
Vue-CLI安装 最新的
npm install -g @vue/cli
查看安装的 版本
vue --version
vue -V v3.2.3
Vue-CLI使用
- 接下来我们使用vue-cli 脚手架工具搭建我们的第一个Vue项目吧!
- cd 到要创建的项目的父目录下
vue create 项目名
- 根据提示创建 即可
除了上面命令行方式创建Vue项目外,还可以使用vue ui 命令以图形化界面创建和管理项目。
vue ui
补充
安装项目依赖/配置项目(拿到一个Vue项目之后先运行这个安装包依赖)
npm install
编译并在本地启动一个开发环境
npm run serve
编译并打包一个生产版本
npm run build
运行测试(前提你要写好测试脚本)
npm run test
- 运行代码检测
npm run lint
element-ui 安装
cnpm i element-ui -S
错误
npm 安装 express 出现
npm ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE npm ERR! errno UNABLE_TO_VERIFY_LEAF_SIGNATURE npm ERR! request to https://registry.npmjs.org/express failed, reason: unable to verify the first certificate
设置下npm config set strict-ssl false
就可以了 这是一个坑。
Node.js webpack Vue-CLI --安装的更多相关文章
- node.js和vue cli脚手架下载安装配置方法
一.node.js安装以及环境配置 1.下载vue.js 下载地址: https://nodejs.org/en/ 2.安装node.js 下载完成后,双击安装包开始安装.安装地址最好换成自己指定的地 ...
- 安装node.js和vue
1.在官网上下载Node.js安装包 https://nodejs.org/zh-cn/ 2.点击安装,一直下一步下一步就行,这里就不在赘述了. 3.安装完之后,如果没有选安装路径的话,一般都是在[ ...
- vue+node.js+webpack开发微信公众号功能填坑——v -for循环
页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...
- Vue Cli安装以及使用
因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...
- Vue技术点整理-Vue CLI安装详解
一,脚手架安装 Node 版本要求 Vue CLI 需要 Node.js +).你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本. 1,全局安装Vue CLI ...
- Hexo准备---Node.js、Vue
Hexo准备---Node.js.Vue 安装node.js 1.下载node 配置node.js环境官网下载,一直next就好,非常方便. 下载官网: http://nodejs.cn/downlo ...
- Node.js系列基础学习----安装,实现Hello World, REPL
Node.js基础学习 简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一 ...
- Node.js的简介和安装
一.Node.js的简介和安装 a) 什么是Node.js? Node.js是一个开发平台 让JavaScript运行在服务器端的开发平台 ---简单点说就是用JavaScript写服务器 ...
- node.js框架express的安装
node.js框架express的安装 首先假定你已经安装了 Node.js,接下来为你的应用创建一个目录,然后进入此目录并将其作为当前工作目录. $ mkdir myapp $ cd myapp 通 ...
- Node.js的下载、安装、配置、Hello World、文档阅读
Node.js的下载.安装.配置.Hello World.文档阅读
随机推荐
- PHP官方网站及PHP手册
每个人都知道php.net,我们或早或晚的都会来到这里并不断的访问它.它是PHPer的主要参考网站,拥有大量有用的信息,但是这些信息却不是那么显而易见. 比较有用的官方PHP资源: PHP官方函数手册 ...
- 深度学习之PyTorch实战(3)——实战手写数字识别
上一节,我们已经学会了基于PyTorch深度学习框架高效,快捷的搭建一个神经网络,并对模型进行训练和对参数进行优化的方法,接下来让我们牛刀小试,基于PyTorch框架使用神经网络来解决一个关于手写数字 ...
- (3)Microsoft office Word 2013版本操作入门_段落设定
1.查看文件: 打开word查看左下角 会显示 word一共有多少页,当前第几页,共多少字等,如下图所示 2.word快速翻页: Ctrl+PageDown 向下翻页, Ctrl+PageUp 向上 ...
- webpack4 系列教程(四): 单页面解决方案--代码分割和懒加载
本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载.不同于多页面应用的提取公共代码,单页面的代码分割和懒加载不是通过webpack配置来实现的,而是通过webpack的写法和内置函数实 ...
- DOM之城市二级联动
1.HTML内容 <select id="province"> <option>请选择</option> <option>山东省&l ...
- CSS效果:CSS select样式优化 含jquery代码
CSS 下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,可以得到如下图这样的: html结构如下: <div class="sel_wrap"> < ...
- loadrunner 运行场景-场景运行原理
运行场景-场景运行原理 by:授客 QQ:1033553122 运行原理 1 Remote Agent Dispatcher(Process) 运行Controller在负载机上开启应用程序. 2 ...
- iOS开发NSDate、NSString、时间戳之间的转化
//将UTCDate(世界标准时间)转化为当地时区的标准Date(钟表显示的时间) //NSDate *date = [NSDate date]; 2018-03-27 06:54:41 +0000 ...
- 自定义ScrollView 实现上拉下拉的回弹效果--并且子控件中有Viewpager的情况
onInterceptTouchEvent就是对子控件中Viewpager的处理:左右滑动应该让viewpager消费 public class MyScrollView extends Scroll ...
- Retrofit2 动态(静态)添加请求头Header
Retrofit提供了两个两种定义HTTP请求头字段的方法即静态和动态.静态头不能改变为不同的请求,头的键和值是固定的且不可改变的,随着程序的打开便已固定. 动态添加 @GET("/&quo ...