windows/mac 使用webpack构建vue项目

最新推荐文章于 2024-12-29 12:48:57 发布

原创最新推荐文章于 2024-12-29 12:48:57 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #vue #node #npm #mac

web前端专栏收录该内容

8 篇文章

订阅专栏

本文探讨了mac和windows系统中使用webpack构建vue项目时的主要区别，主要集中在环境配置上。在windows中，由于需要配置环境，可能会遇到更多坑，但一旦node.js和npm安装完成，两个系统的搭建过程差异不大。文章提到了在windows下通过切换到国内镜像源加速node.js和npm的安装过程。

一、mac环境和windows最大的区别是，windows需要配置环境，有很多坑，基本上node和npm装好了，搭建vue时两者没有很大区别。

二、node.js的配置

A、windwos下

1、去官网下载，https://nodejs.org/en/点击打开链接;
2、安装直接next，在custom setup时，选择npm package manager;
3、安装后进入cmd    测试是否安装成功
      输入node -v  查看node版本号；
4、安装npm
      使用cmd命令，输入 npm-v，查看npm版本号；
5、node环境搭建完成    输入nodejs第一句：   console.log("hello world");
6、安装配置模块   
    （1） 配置npm的全局模块的存放路径以及cache的路径
            在cmd 中 输入  npm config set prefix "C:\Program Files\nodejs\node_global"以及npm config set cache "C:\Program Files\nodejs\node_cache"
    （2） 安装模块     npm install express -g  
            $ npm install
            以下实例，我们使用 npm 命令安装常用的 Node.js web框架模块 express:
            npm install express         # 本地安装
            npm install express -g   # 全局安装
    （3） 关闭cmd   设置环境变量
            新建系统环境变量： 在系统变量下新建"NODE_PATH"，输入”C:\Program Files\nodejs\node_global\node_modules“。
    （4） 以上步骤结束后    cmd ---   进入node环境     ---- 输入 require("express")
7、tips:
    linux 配置：
    下载最新版本node.js for linux的源码安装包
    解压压缩包  
    进入解压文件夹 cd node-v0.8.8
    执行   ./configure
    执行     make
    执行    make   install
    安装完成后执行   node -v 查看版本

B、我的mac中直接有node和npm，所以这里不对mac中node的配置做记录

三、webpack构建vue

1、安装nodejs
2、安装npm（node自带）
3、在终端/cmd输入指令安装webpack
    npm install webpack -g
4、安装vue
    npm install vue
5、安装vue-cli
    npm install —global vue-cli
6、 A、mac机：
        在桌面创建一个总工程目录，并打开：
        cd /Users/hyj/Desktop/first
    B、windows:
        打开node_global文件夹：
        cd/Program Files/nodejs/node_global

7、新建一个工程：
    vue init webpack firstdemo
8、打开该工程：
    cd firstdemo
9、工程内安装npm 
    npm install
10、运行npm run dev

而经常在npm install这一步，下载速度很慢。

这时候我们在npm install 的前一步设置registry的安装路径，命令如下：

npm config set registry http://registry.npm.taobao.org1
1

换了国内镜像，安装速度就很快了。