一、首先安装下载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项目的更多相关文章

  1. vue-cli快速构建Vue项目

    vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm i ...

  2. vue-cli快速构建vue项目模板

    vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的. 1.使用npm安装vue-cli 需要先装好vue 和 webpack(前提是已经安装了nodejs,否则连npm都用不了 ...

  3. 自动化工具构建vue项目

    其实之前对vue的话也有过一段时间的学习,博客园也是写了5篇vue的学习笔记.但是一直是通过CDN的方式在html文件头部引入vue.js,然后实例化vue对象绑定Dom,写组件写方法.就算是在实际项 ...

  4. vue,一路走来(1)--构建vue项目

    2016年12月--2017年5月,接触前端框架vue,一路走来,觉得有必要把遇到的问题记录下来. 那时,vux用的是1.0的vue,然而vue2.0已经出来了,于是我结合了mint-ui一起来做项目 ...

  5. 使用nodeJs安装Vue-cli并用它快速构建Vue项目

    部分摘自:http://www.cnblogs.com/wisewrong/p/6255817.html(已在本地测试) 前提:nodeJs本地已安装. 一.安装 vue-cli 1.使用nodeJs ...

  6. Node.js Express+Mongodb 项目实战

    Node.js Express+Mongodb 项目实战 这是一个简单的商品管理系统的小项目,包含的功能还算挺全的,项目涵盖了登录.注册,图片上传以及对商品进行增.删.查.改等操作,对于新手来说是个很 ...

  7. Hexo准备---Node.js、Vue

    Hexo准备---Node.js.Vue 安装node.js 1.下载node 配置node.js环境官网下载,一直next就好,非常方便. 下载官网: http://nodejs.cn/downlo ...

  8. Windows10安装node.js,vue.js以及创建第一个vue.js项目

    [工具官网] Node.js : http://nodejs.cn/ 淘宝NPM: https://npm.taobao.org/ 一.安装环境 1.本机系统:Windows 10 Pro(64位)2 ...

  9. 从零构建vue项目(一)--搭建node环境,拉取项目模板

    本文是基于vuecli2搭建的项目. 1. 下载安装nodejs     地址:https://nodejs.org/en/download/ 选择安装版windows .msi, 不要选择压缩版 下 ...

随机推荐

  1. git所遇到的问题

    出现这种情况,或 ERROR: Repository not found. fatal: 无法读取远程仓库. 解决办法如下: 1.先输入$ git remote rm origin(删除关联的orig ...

  2. system的使用

    <stdio.h>       std是一个标准库,i =input   o =output      标准输入输出库    .h头文件   system的使用   功能:在已经运行的程序 ...

  3. git,github,webstrom配置

    在使用 WebStorm 上传本地项目到 GitHub 之前,先要做一些相关配置. 首先打开 WebStorm ,依次点击File -> Settings... 打开系统设置面板,在上面搜索 g ...

  4. vue 嵌入倒计时组件( 亲测可用 )

    由于花费了我不少时间才找到的组件,所以记录一下,后面方便自己好找一些,也算是分享出来给各位前端一起用. npm 下载npm install vue2-flip-countdown --save tem ...

  5. Java基础(一)——面向对象

    一.对象 1.成员变量和局部变量的区别 两类变量同名时,局部变量具有更高的优先级. 作用域不同:局部变量的作用域仅限于定义它的方法,作用于函数或者语句中:成员变量的作用域在整个类中. 初始值不同:Ja ...

  6. shell循环语句while

    格式1: while 条件 do 执行命令 done 格式2: while 条件;do 命令 done 例子: while [ 1 -eq 1 ];do echo "这一步需要先修改/dat ...

  7. mac、ip、udp头解析

    一.MAC帧头定义 /*数据帧定义,头14个字节,尾4个字节*/ typedef struct _MAC_FRAME_HEADER {  char m_cDstMacAddress[6];    // ...

  8. js判断是在移动端还是在pc端

    function chatQQ3(){ if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) { //移动端打开 ...

  9. 记录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 [ ...

  10. cannot connect to chrome at 127.0.0.1:9222

    window10系统,先cmd打开chrome, chrome --remote-debugging-port=9222 执行脚本 from selenium import webdriver fro ...