实践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, 不要选择压缩版 下 ...
随机推荐
- git所遇到的问题
出现这种情况,或 ERROR: Repository not found. fatal: 无法读取远程仓库. 解决办法如下: 1.先输入$ git remote rm origin(删除关联的orig ...
- system的使用
<stdio.h> std是一个标准库,i =input o =output 标准输入输出库 .h头文件 system的使用 功能:在已经运行的程序 ...
- git,github,webstrom配置
在使用 WebStorm 上传本地项目到 GitHub 之前,先要做一些相关配置. 首先打开 WebStorm ,依次点击File -> Settings... 打开系统设置面板,在上面搜索 g ...
- vue 嵌入倒计时组件( 亲测可用 )
由于花费了我不少时间才找到的组件,所以记录一下,后面方便自己好找一些,也算是分享出来给各位前端一起用. npm 下载npm install vue2-flip-countdown --save tem ...
- Java基础(一)——面向对象
一.对象 1.成员变量和局部变量的区别 两类变量同名时,局部变量具有更高的优先级. 作用域不同:局部变量的作用域仅限于定义它的方法,作用于函数或者语句中:成员变量的作用域在整个类中. 初始值不同:Ja ...
- shell循环语句while
格式1: while 条件 do 执行命令 done 格式2: while 条件;do 命令 done 例子: while [ 1 -eq 1 ];do echo "这一步需要先修改/dat ...
- mac、ip、udp头解析
一.MAC帧头定义 /*数据帧定义,头14个字节,尾4个字节*/ typedef struct _MAC_FRAME_HEADER { char m_cDstMacAddress[6]; // ...
- js判断是在移动端还是在pc端
function chatQQ3(){ if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { //移动端打开 ...
- 记录centos下nl与cat -n的不同
nl命令列出文件行不包含空格,cat -n包含空格 [root@bogon ~]# cat -n test.txt 1 a 2 aa 3 aaa 4 aaaa 5 aaaaa 6 7 aaaaaa [ ...
- cannot connect to chrome at 127.0.0.1:9222
window10系统,先cmd打开chrome, chrome --remote-debugging-port=9222 执行脚本 from selenium import webdriver fro ...