精华内容
下载资源
问答
  • vue环境怎么配置
    千次阅读
    2020-06-23 10:02:43

    目录

    1. 安装node.js
    2. 设置node prefix(全局)和cache(缓存)路径
    3. 安装cnpm(淘宝镜像)
    4. 设置环境变量
    5. 安装Vue
    6. 安装脚手架工具vue-cli
    7. 创建项目
    8. 安装依赖

     


     (一)安装node.js

    下载请戳:node.js下载地址

    看到这个界面,你可以根据自己的系统来选择下载安装文件。

    至于node的安装路径,你可以选择安装在C盘,也可以选择非系统盘,但是接下来的配置,还要使用到安装路径。

    (二)设置node global(全局)和cache(缓存)路径

    往后全局更新,下载的工具,模块放置在node_global

    找到node安装的地方,在node文件夹里新建两个文件夹,分别是node_global和node_cache

    如下图:

    这里我安装在D盘,node文件夹是安装node的文件夹,就在node文件夹里面新建了上述的两个文件。

    接下来要设置好这两个文件夹的路径:

    运行: npm config set cache "D:\node\node_cache" 设置缓存文件夹;

    运行: npm config set prefix "D:\node\node_global"设置全局模块存放路径;

    注意:还要修改node\node_modules\npm\npmrc文件,因为不做这个修改的话,则npm在运行 npm ls  -g 的时候,仍然以默认的路径来查找已安装的全局模块;

    prefix=D:\node  

    (三)安装淘宝镜像  

      1. 临时方法: npm --registry https://registry.npm.taobao.org install express  

      2. 永久方法: npm config set registry https://registry.npm.taobao.org

      配置后可通过下面方式来验证是否成功

      npm config get registry  

      注:使用的时候和npm用法一样,开头也使用是npm

    (四)系统变量:

    新建NODE_PATH,添加路径地址,(node_modules不存在,直接添加)

    1

    (五)安装Vue

    运行:npm install vue -g

    这里是全局安装  

    (六)安装vue脚手架vue-cli

    运行:npm install vue-cli -g

    (七)创建vue项目 

    vue init webpack myproject  

    tips: 接下来的话能阅读正常英文即可,也不是难点,看情况配置吧。

    (八)安装依赖

    运行:npm install

    最后: npm run dev 即可开始使用vue了。

    参考文献  

    nodejs prefix(全局)和cache(缓存)windows下设置

    cnpm淘宝镜像的安装和使用方法

    更多相关内容
  • Vue项目环境配置

    千次阅读 2022-04-16 21:05:38
    Vue安装详细步骤及配置环境 一、安装node js 下载地址:http://nodejs.cn/download/ 二、安装完成后需配置环境 node安装完成后,打开node安装后的文件并复制其路径,到环境变量 -> 系统变量->Path下,新建...

    Vue安装详细步骤及配置的环境

    一、安装node js

    下载地址:http://nodejs.cn/download/

    二、安装完成后需配置环境

    node安装完成后,打开node安装后的文件并复制其路径,到环境变量 -> 系统变量->Path下,新建粘贴其路径,如下图:
    在这里插入图片描述

    配置完成后检查是否安装成功 node -v npm -v

    在这里插入图片描述

    三、配置npm在安装全局模块时的路径和缓存cache的路径

    ​ 在node 路径里新建两个空文件夹node_cache和node_global。最好在系统环境下

    npm config set prefix "C:\Program Files\nodejs\node_global"
    
    npm config set cache "C:\Program Files\nodejs\node_cache"
    

    执行成功后,然后在环境变量 -> 系统变量中新建一个变量名为 “NODE_PATH”, 值为“C:\Program Files\nodejs\node_modules”,如下图:

    在这里插入图片描述

    接着改 用户变量->Path,新建值为:“C:\Program Files\nodejs\node_global”如下图:

    在这里插入图片描述

    四、安装淘宝镜像

    在系统环境下安装淘宝镜像

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    

    五、安装vue脚手架

    cnpm install -g vue-cli
    

    安装成功后,输入vue --version 查看版本
    在这里插入图片描述

    展开全文
  • vue3.0环境变量配置.md

    2020-04-08 12:51:00
    vue3.0环境变量配置大致思路: 1,创建修改相关配置文件(Ctrl + C V即可) 2,封装 axios(根据配置文件,首先判断当前环境,获取对应环境的数据库地址作为当前环境...4,使用插件对代码进行测试判断环境配置是否成功
  • Vue开发环境配置

    千次阅读 多人点赞 2021-08-08 20:41:22
    文章目录Vue开发环境配置1、Node.js1.1 Node.js 下载1.2 Node.js 安装1.3 Node.js 配置1.3.1 其他环境配置(可跳过)1、创建新文件夹2、执行命令,设置全局模块和缓存位置3、配置环境变量4、测试1.3.2 npm配置国内...

    先来欣赏一下:

    在这里插入图片描述

    欣赏完了,开撸~~

    Vue开发环境配置

    包括:

    Node.js

    • Node.js 就是运行在服务端JavaScript
    • Node.js 的包管理器 npm,是全球最大的开源库生态系统。
    • 简单地说,Vue的开发和运行**(Vue组件:.vue后缀)**需要用到Node.js环境。

    Vue

    • 安装完Vue才能安装Vue-CLIVue-CLI可能依赖Vue

    Vue-CLI(Vue脚手架)

    • vue cli 是一个基于 Vue.js 进行快速开发的完整系统(标准化开发工具/平台)。
    • vue-cli 提供一个官方命令行工具,可用于快速搭建大型应用。
    • 该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程。
    • 只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

    1、Node.js

    1.1 Node.js 下载

    下载地址:Nodejs官网下载

    • 根据自己的系统选择对应的版本和位数,我这里选择windows-64位

    1

    • 如果想下载历史版本,可以下滑找到:

    在这里插入图片描述

    • 下载完成,会得到这样一个文件

    在这里插入图片描述

    1.2 Node.js 安装

    • 右键–选择安装–点击Next

    在这里插入图片描述

    • 打钩–点击Next

    在这里插入图片描述

    • 点击Change可以修改安装位置–点击Next
    • 建议所有的开发环境都放在一个统一的文件夹下,方便管理。

    在这里插入图片描述

    • 保持默认即可。点击Next

    在这里插入图片描述

    • 点击Next即可。
    • 解释说明
      • 一些NPM模块在安装时需要从C/C++编译。如果您希望能够安装这些模块,则需要安装一些工具(Python和VisualStudioBuildTools),打上勾则安装这些工具。
      • 如果不安装,则后期可以通过:https://github.com/nodejs/node-gyp#on-windows自行进行安装。

    在这里插入图片描述

    • 点击Install进行安装。

    在这里插入图片描述

    • 等待安装完成,点击Finish即可完成安装。

    在这里插入图片描述

    安装完成后,可以简单地检查一下Nodejs是否安装成功。

    • 按住windows键和R键,调出运行窗口,输入cmd,按回车(Enter)。

    在这里插入图片描述

    • 输入node -v 显示node.js的版本号,说明node.js安装成功;
    • 输入npm -v 显示npm的版本号,说明node.js自带的npm工具也安装成功了。
    • 注意 -v 之前有个空格

    在这里插入图片描述

    1.3 Node.js 配置

    安装完的Node.js安装目录的文件如下:

    在这里插入图片描述

    说明:

    NPM(节点包管理器)是的NodeJS的包管理器,用于节点插件管理(包括安装,卸载,管理依赖等)。

    新版的Node.js已自带npm工具,安装Node.js时会一起安装,npm的作用就是对Node.js依赖的包进行管理,也可以理解为用来安装或卸载Node.js需要装的东西。

    1.3.1 其他环境配置(可跳过)

    说明:

    • 这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,
    • 之所以要配置,是因为以后在执行类似:npm install express [-g] (后面的可选参数-gg代表global全局安装的意思)的安装语句时,
    • 会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。
    1、创建新文件夹

    例如:

    我在Node.js安装目录下创建node_cachenode_global两个文件夹,用于存放缓存和全局模块,方便统一管理。如下图:

    在这里插入图片描述

    2、执行命令,设置全局模块和缓存位置

    创建完两个文件夹后,windows + R 键,在运行窗口输入cmd,打开命令行窗口。输入如下命令,然后按回车

    npm config set prefix "E:\develop\Nodejs\node_global"
    npm config set cache "E:\develop\Nodejs\node_cache"
    

    注意!命令中的路径要改成你自己的。如下:

    npm config set prefix "你的全局模块文件夹路径"
    npm config set cache "你的缓存文件夹路径"
    

    如图,设置完成后,关闭黑窗口。

    在这里插入图片描述

    3、配置环境变量
    • 右键–此电脑–属性。

    在这里插入图片描述

    • 高级系统设置–高级–环境变量。

    在这里插入图片描述

    • 选择上面的用户变量–Path–编辑。

    在这里插入图片描述

    • 选择默认路径–编辑。

    在这里插入图片描述

    • 设置为自己创建的全局模块保存位置–确定。

    在这里插入图片描述

    • 选择系统变量–新建–输入变量名和变量值–确定。

      变量名:NODE_PATH

      变量值:你自己的全局模块存放位置\node_modules

      变量值如:E:\develop\Nodejs\node_global\node_modules

    在这里插入图片描述

    • 然后一路点击确定即可完成配置。
    4、测试
    • 配置完后,安装个module测试下,打开cmd窗口,输入如下命令进行模块的全局安装:
    npm install express -g     # -g是全局安装的意思
    
    • 如果出现如下图所示的错误,关掉命令行窗口,以管理员的身份再重新运行命令行即可。

    在这里插入图片描述

    • 重新运行,安装成功如下图所示:

    在这里插入图片描述

    • 打开自己配置的全局模块安装目录,即可看到刚刚安装的全局模块。

    在这里插入图片描述

    1.3.2 npm配置国内镜像源:淘宝镜像

    node.jsnpm源默认是在国外的,国内下载有时候很慢,建议配置国内镜像源。

    这里配置的是淘宝的,也可以配置其他的,看自己的个人习惯了。

    通过npm方式配置

    • 打开命令行窗口(以管理员身份运行),输入以下命令:

      npm config set registry https://registry.npm.taobao.org
      
    • 验证:返回所设置的地址,则说明设置成功。

      npm config get registry
      
    • 设置成功,如下图所示:
      在这里插入图片描述

    1.3.3 安装cnpm

    1. 说明:因为谷歌安装插件是从国外服务器下载,受网络影响大,可能出现异常。
    2. 所以需要安装cnpm(淘宝的),用于加速下载。
    3. 官方网址:http://npm.taobao.org
    • 打开命令行窗口(以管理员方式运行),输入以下命令,安装cnpm

      npm install -g cnpm --registry=https://registry.npm.taobao.org
      
    • 验证

      cnpm -v
      
    • 出现如下界面,表示安装验证成功:

    在这里插入图片描述

    注:CNPM跟NPM用法完全一致,只是在执行命令时将NPM改为CNPM

    • 之后就可以使用cnpm了:(安装xxx)

      npm install xxx  # npm方式
      cnpm install xxx # cnpm方式
      

    2、安装Vue

    2.1 命令

    • 以管理员身份打开命令行窗口,输入如下命令(cnpm方式):
    cnpm install vue -g
    

    如下图:

    在这里插入图片描述


    3、安装 Vue-CLI(Vue脚手架)

    3.1 安装

    • 以管理员身份打开命令行窗口,输入如下命令(cnpm方式):
    cnpm install vue-cli -g
    
    • 如下图:

    在这里插入图片描述

    3.2 验证

    • 以管理员身份打开命令行窗口,输入如下命令(cnpm方式):
    • 以下方式二选一,进行验证,注意空格。
    vue -V
    vue --version
    
    • 如下图:vue-cli 版本号为:2.9.6

    在这里插入图片描述

    3.3 卸载(重装)vue-cli 或 Vue.js

    安装新版本或要重装前,需要先把之前安装的版本卸载掉。

    • vue-cli(Vue.js) 卸载

      cnpm uninstall vue-cli -g  # 3.0以下版本卸载
      cnpm uninstall -g @vue/cli  # 3.0以上版本卸载
      
    • vue-cli(Vue.js) 重装(指定版本号)

      cnpm install -g @vue/cli  # 安装的是最新版
      cnpm install vue-cli@2.9.6  # 指定版本安装【指定版本为3.0以下版本】,其中2.9.6为版本号
      cnpm install -g @vue/cli@3.11.0 # 指定版本安装【指定版本为3.0以上版本】,其中3.11.0为版本号
      

    4、参考博客

    vue-cli指定版本安装

    搭建 vue 开发环境: node.js安装+vue脚手架配置

    npm配置国内镜像资源+淘宝镜像

    本文也参考了一些比较好的博客,参考的博客在文章第四点已列出。

    本文有说的不对或者不完善的地方,欢迎批评指正,谢谢。

    至此,Vue基本开发环境配置完成,希望能帮助到你,欢迎点赞,评论,转发,收藏。

    展开全文
  • Hbuilder下uni-app的vue环境配置

    千次阅读 2022-03-18 13:34:39
    Hbuilder下uni-app的vue环境配置 下载Hbuilder:Hbuilder下载地址 有Windows和MacOS两个系统可以进行选择(推荐下载APP开发版) 下载完压缩包,解压即可运用该文本编辑器 如果不会安装可以去hbuilder官网看如何...

    Hbuilder下uni-app的vue环境配置

    下载Hbuilder:Hbuilder下载地址
    在这里插入图片描述
    在这里插入图片描述
    有Windows和MacOS两个系统可以进行选择(推荐下载APP开发版)
    下载完压缩包,解压即可运用该文本编辑器
    如果不会安装可以去hbuilder官网看如何操作(因为太简单了,所以就放个下载后操作步骤的链接)下载后操作步骤

    配置环境

    去uni-app官网上下载:vue环境
    在这里插入图片描述
    全局安装可暂时忽略(因为本博主也没安装全局hhh)
    接下来就是:
    在这里插入图片描述
    选择一个版本命令在终端执行(我选的是JavaScript)
    在操作过程中如果出现:
    在这里插入图片描述
    直接去gitee下下载uni-preset-vue:
    在这里插入图片描述
    下载地址:uni-preset-vue
    或者直接点击gitee就可跳转,进行机器人识别后,就会自动帮你下载
    在这里插入图片描述
    下载完压缩包进行解压:
    在这里插入图片描述
    点开Hbuilderx的文件夹,找到Hbuilder.exe文件,打开:
    在这里插入图片描述
    在这里插入图片描述
    这里面的内容与该篇博客无关(无聊的时候随手打的h5)

    点击uni-preset-vue,选择该文件下的子目录uni-preset-vue-vite(一开始点击的那个uni-preset-vue-vite是父目录):
    在这里插入图片描述
    将该文件夹拖入Hbuilderx左侧的项目栏中中:
    在这里插入图片描述
    在Hbuilderx中找到运行(最上面),点击运行到终端:
    在这里插入图片描述
    在这里插入图片描述
    根据你的所需选择需要建立的环境即可
    如果和我一样是建立app的环境,可选择内部终端或者外部终端,若选择外部终端会自动下载:
    在这里插入图片描述
    到这里vue环境就下载完成了,这个warm可以暂时不用理

    展开全文
  • webstorm配置vue环境

    2022-04-16 12:57:11
    下载安装以及简单使用
  • Vue安装和环境配置

    千次阅读 2022-04-07 15:00:10
    6、安装vue-cli脚手架构建工具 打开命令行工具输入:cnpm install vue-cli -g,安装完成之后输入 vue -V(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。 7、创建Vue项目 打开命令行...
  • Vue安装及环境配置

    万次阅读 多人点赞 2021-12-02 14:11:17
    三、node.js环境配置 “我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量”,进入环境变量对话框 1、【系统变量】下新建【NODE_PATH】,输入的内容根据实际来【D:\node\node_global\node_modules 】...
  • vue入门及其环境配置

    千次阅读 2022-03-13 19:33:47
    第一次配置vue并运行
  • Vue基础入门 ---环境配置

    千次阅读 热门讨论 2021-06-19 17:10:06
    环境配置是学习vue的前提,所以下面就以通俗易懂的方式去展现vue环境配置。 一,软件下载 node.js环境 官网下载地址:https://nodejs.org/zh-cn/ Visual Studio Code 官网下载地址:...
  • mac配置vue开发环境

    2022-03-31 13:09:21
    目录前言正文1.环境1.1 vscode安装1.2 npm安装1.3 ...包含配置windows环境:【小白学习Vue | 1】安装Vue配置HBuilder 正文 1.环境 1.1 vscode安装 官网下载:https://code.visualstudio.com/ 下载慢的问题:将域
  • Vue安装及环境配置、开发工具

    万次阅读 多人点赞 2020-09-29 17:06:08
    node.js环境配置4. 配置淘宝镜像源二、使用步骤1.引入库2.读入数据总结 前言 vue前端框架的环境搭建 一、node.js安装和配置 1. 下载安装node.js 官网下载最新版本:https://nodejs.org/en/download/ 可以下载...
  • vscode配置vue环境

    千次阅读 2020-03-22 22:39:01
    1.1 vscode开发vue visual studio code 配置vue开发环境
  • 开始配置电脑node环境配置VUE 脚手架环境以及配置VUE项目VSCode 配置 配置电脑node环境 前往 node.js 安装 电脑对应版本的node Node.js 下载 长期支持版,用的人多,应该稳定吧 安装好后 ,windows,进入cmd 输入 ...
  • 配置不同环境变量可避免切换不同环境时手动修改项目配置,请求url等,vue项目中可先在package.json文件中这样设置: "scripts": { "dev": "vue-cli-service serve --mode development", //开发环境 "dev:test": ...
  • vue项目配置生产、测试和开发环境

    千次阅读 2022-05-28 11:07:09
    在实际的开发过程中,从开发到测试完成、发布到线上所调用到的接口地址可能都不一样,那就需要在项目中分别配置各个环境的接口地址(或者域名,也可以定义不同环境下的不同变量)。 首先,在项目根目录下新建3个文件...
  • vue的安装与环境配置

    千次阅读 2021-09-21 15:05:18
    1、下载安装node.js ... 下载完成后直接安装即可 这里我是安装在E盘 E:\Program Files\...2、配置环境变量 在node的安装目录下 E:\Program Files\nodejs 添加两个文件夹 “node_global”、“node_cache” 修改npm
  • webstorm 运行Vue项目环境配置

    千次阅读 2021-06-17 11:50:30
    webstorm 运行Vue项目环境配置 ** 一、webstorm安装 二 、Vue的安装 Vue的安装需要两个支持分别为:nodejs、npm  Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。  Node.js 的包管理器 npm,是全球...
  • 开始前的准备,Vue环境配置

    千次阅读 2022-01-17 19:09:34
    Vue的安装方式: 直接用script引入(推荐)。 运用NPM和命令行工具来搭配引入。 引入Vue 如图新建文件,并在指定位置中引入下载的js包: 在html文件中引入vue: <!--引入Vue--> <script type=...
  • vue环境配置及vscode调试

    千次阅读 2019-09-13 15:50:29
    本教程关于vue 在vscode 中的调试及开发。...mac安装 vue开发环境 以下展示 shell内容的详细信息。 #!/bin/bash -v #set -v echo "vrew 版本." brew -v echo "安装node.js" brew install nodejs echo...
  • Vue — .env环境配置

    千次阅读 2021-11-08 17:25:15
    文件说明 .env:全局默认配置文件,所有...// 例:自定义环境配置 .env.test:自定义测试环境配置 .env.uat:自定义预发环境配置 "scripts": { "serve": "vue-cli-service serve", "build:test": "vue-cli-service
  • vue+cesium初探(一)之vue环境配置

    千次阅读 2020-08-10 09:44:47
    1、基础环境 ...4、配置vue.config.js 在项目目录下新建vue.config.js,配置如下 const CopyWebpackPlugin = require('copy-webpack-plugin') const webpack = require('webpack') const path = requi...
  • vue配置环境变量

    千次阅读 2022-06-24 17:06:09
    大家好,我是大帅子,今天给大家讲一下vue配置环境变量,今天给一些想学vue的新人配置一下环境变量,跟写vue代码前的一些必要的配置,下面我们直接开始吧,学习vue, 用更少的时间干更多的活 Vue.js做法 .脚手架-介绍...
  • Vue-cli环境配置

    2021-06-22 15:22:27
    NodeJS环境配置Vue创建启动、VSCode开发使用
  • vue 环境配置(使用cross-env配置)

    千次阅读 2020-04-15 16:35:34
    vue 环境配置(使用cross-env配置) 通过定义不同的打包命令, 更改项目环境变量 。 1、下载 cross-even(什么是’cross-even’) npm install cross-env --save-dev 2、package.json 文件 查询 scripts,在其中...
  • vue多种环境配置文件配置

    千次阅读 2020-09-20 17:11:14
    使用如下 在package.json新增命令脚本 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint", ... "build:alpha": "vue-cli-service build.
  • vscode Vue开发环境配置

    千次阅读 2020-05-16 01:13:28
    现在大不同了,很多插件的默认配置就很不错了,大部分环境都是装个插件就可以直接上手了。 vscode 跑 vue 应该算是非常常见的了,本文主要记录一些我使用 vue 插件的时候遇到的一些问题。 首先,Vetur基本上是必不可...
  • vue环境配置问题记录

    千次阅读 2022-02-21 16:20:06
    记录环境配置中遇到的问题
  • idea配置vue开发环境

    千次阅读 2020-10-22 16:10:33
    1.下载node.js 下载地址:https://nodejs.org/zh-cn/ 2.安装nodejs 默认安装即可。 安装完毕后,测试安装是否成功。 3.修改镜像库位国内淘宝镜像 ...5.安装vue-cli npm install -g vue-cli ...7.idea配置
  • windos10 vue 全局安装 以及配置环境

    千次阅读 2022-03-25 09:42:26
    在键盘按下【win+R】键,输入cmd,然后回车,打开cmd窗口 环境配置 创建完两个空文件夹之后,打开cmd命令窗口,输入 根据自己需要设置 npm config set prefix "E:\nodejs\node_global" npm config set cache "E:\...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 105,445
精华内容 42,178
关键字:

vue环境怎么配置