实践node.js构建vue项目
一、首先安装下载node.js
1、Node.js 官方网站下载:https://nodejs.org/en/,自行选择合适自己的下载安装即可
2、验证安装
打开cmd,输入node –v和 npm –v 都有相应的版本输出,说明安装成功。如图
3、配置npm的全局模块安装路径和cache路径
1)在node.js安装目录下新建两个文件夹 node_global和node_cache,然后在cmd命令下执行如下两个命令:
npm config set prefix "C:\Program Files\nodejs\node_global"
npm config set cache "C:\Program Files\nodejs\node_cache"
注:"C:\Program Files\nodejs\"是我的nodejs的安装目录,此处是自己的安装目录
2)编辑用户变量里的path,将相应npm的路径改为:C:\Program Files\nodejs\node_global,如下图所示:
二、安装webpack打包工具
在cmd命令下执行 npm install webpack -g ,安装成功后可以看到webpack已经安装到自己设置的node_global目录下。
三、切换npm淘宝镜像(此步可以根据自己来选择是否安装)
直接使用npm 的官方镜像是非常慢的,网上很多使用cnpm来代替npm的方法,但是这样很多时候需要使用cnpm命令。我们可以设置把npm的镜像源设置为淘宝的,以后就可以直接使用npm命令了,其实本质上是一样的。
在cmd中执行命令:npm config set registry https://registry.npm.taobao .org
输入命令:npm config get registry 来检测是否设置成功。
四、全局安装vue-cli工具
cmd中执行命令:npm install vue-cli –g
五、创建vue项目
1、使用vue初始化基于webpack的新项目:vue init webpack myVuePro,初始化过程中会有一些选项,可以按照自己的需求进行选择,如下图
2、完成操作后就可以以在你选择的文件中看到创建成功的vue项目了,如图:(PS:我选择的项目文件目录是D:/Test)
下面就可以用编译工具打开进行开发了
实践node.js构建vue项目的更多相关文章
- vue-cli快速构建Vue项目
vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm i ...
- vue-cli快速构建vue项目模板
vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 1.使用npm安装vue-cli 需要先装好vue 和 webpack(前提是已经安装了nodejs,否则连npm都用不了 ...
- 自动化工具构建vue项目
其实之前对vue的话也有过一段时间的学习,博客园也是写了5篇vue的学习笔记.但是一直是通过CDN的方式在html文件头部引入vue.js,然后实例化vue对象绑定Dom,写组件写方法.就算是在实际项 ...
- vue,一路走来(1)--构建vue项目
2016年12月--2017年5月,接触前端框架vue,一路走来,觉得有必要把遇到的问题记录下来. 那时,vux用的是1.0的vue,然而vue2.0已经出来了,于是我结合了mint-ui一起来做项目 ...
- 使用nodeJs安装Vue-cli并用它快速构建Vue项目
部分摘自:http://www.cnblogs.com/wisewrong/p/6255817.html(已在本地测试) 前提:nodeJs本地已安装. 一.安装 vue-cli 1.使用nodeJs ...
- Node.js Express+Mongodb 项目实战
Node.js Express+Mongodb 项目实战 这是一个简单的商品管理系统的小项目,包含的功能还算挺全的,项目涵盖了登录.注册,图片上传以及对商品进行增.删.查.改等操作,对于新手来说是个很 ...
- Hexo准备---Node.js、Vue
Hexo准备---Node.js.Vue 安装node.js 1.下载node 配置node.js环境官网下载,一直next就好,非常方便. 下载官网: http://nodejs.cn/downlo ...
- Windows10安装node.js,vue.js以及创建第一个vue.js项目
[工具官网] Node.js : http://nodejs.cn/ 淘宝NPM: https://npm.taobao.org/ 一.安装环境 1.本机系统:Windows 10 Pro(64位)2 ...
- 从零构建vue项目(一)--搭建node环境,拉取项目模板
本文是基于vuecli2搭建的项目. 1. 下载安装nodejs 地址:https://nodejs.org/en/download/ 选择安装版windows .msi, 不要选择压缩版 下 ...
随机推荐
- 字符串拷贝函数递归与非递归的C语言实现
初学递归的时候,觉得很抽象,不好分析,确实如此,尤其是有些时候控制语句不对,导致程序进去无限次的调用,更严重的是栈溢出.既要正确的控制结束语句,又要有正确的进入下次递归的语句,还要有些操作语句.... ...
- java 将字符串拆分成块装数组
split 将字符串拆分 regex=???,根据???以其为界进行拆分. public String[] split(String regex) 根据给定正则表达式的匹配拆分此字符串. 该方法的作用 ...
- javascript 之迭代器
简介 迭代器是一种设计模式,可在容器对象 如 链表.数组上遍历,无需关心容器对象的内存分配的实现细节.简单的理解就是可以一个一个的依次拿到其中的数据,类似一个移动的指针,但是会告诉我们什么时候结束.这 ...
- Charles-模拟弱网环境
在做弱网测试时,经常需要模拟各种网络环境,Charles恰好也提供了网络限制的功能,我们可以在"Proxy->Throttle Settings"路径下找到它,如下图所示. ...
- 如何在RHEL7或CentOS 7系统下修改网卡名称(亲测有效~!)
亲测有效的更改RHEL7或CentOS 7的网卡名称的方法, 按照以下4步来操作就可以实现! Step 1 :网卡配置文件名称重命名为eth0[root@localhost ~]# ifconfige ...
- JS009. 数组去重的多种方法总结与一步步优化
两层for循环 这种函数的优点是兼容性好比较通用,缺点是时空复杂度都很直观的为O(n2),不利于维护和性能. var array = [1,1,'1','1'] function unique(arr ...
- linu命令进阶篇
预备知识: 本实验要求实验者具备如下的相关知识. 前面我们学习了linux的文件系统,了解的文件系统的结构,也学了linux档案的属性和权限,以及其设定. 当我们执行命令操作一个文件的时候,却不知道这 ...
- vue-cli3项目中使用vue-ueditor-wrap
Vue + UEditor + v-model 双向绑定 一.安装 1 npm i vue-ueditor-wrap 2 # 或者 3 yarn add vue-ueditor-wrap 二.下载文件 ...
- eclipse安装配置
安装eclipse,并运行了第一个Hello World!
- 1.24学习总结——HTML常见标签
HTML 标签简写及全称 下表列出了 HTML 标签简写及全称: 标签 英文全称 中文说明 a Anchor 锚 abbr Abbreviation 缩写词 acronym Acronym 取首字母的 ...