美文网首页
vue-001、Vue的基础环境搭建

vue-001、Vue的基础环境搭建

作者: Docker_Compose | 来源:发表于2020-07-18 18:35 被阅读0次

一、 环境声明

windows10




二、前期准备

1、node-v12.18.2-win-x64.zip

node-v12.18.2-win-x64.zip是从nodejs官网上下载的windows的二进制文件,解压即可使用。



2、test.js

  1. 创建一个test.js文件,并写下如下内容:
var vue=require("vue")
console.log(vue);
  1. test.js的作用是用来验证测试的




三、安装nodejs

  1. 在D盘中创建一个Nodejs文件夹,将node-v12.18.2-win-x64.zip压缩包放在Nodejs文件夹中,解压即可
  2. nodejs解压后的路径为:
D:\Nodejs\node-v12.18.2-win-x64




四、配置环境变量

1、配置nodej的环境变量

鼠标移到在“我的电脑”上,右键后,选择“属性”;然后,打开“高级系统设置”;接着,再打开“环境变量”;在“系统环境变量(s)”下找到path路径。在path路径下,配置nodejs的安装目录:

D:\Nodejs\node-v12.18.2-win-x64



2、 验证nodejs是否安装成功

  1. 打开cmd,输入:
node -v




五、修改包路径

1、方案一

创建两个文件夹node_global和node_cache
  1. node_global文件夹是全局包下载存放,node_cache是node缓存。网上大多数的都是选择在nodejs安装目录下创建这两个文件夹,不过,作者选择在F盘创建,创建如下:
  • 在F盘创建nodejs文件夹
  • 切换到nodejs文件夹下,再次创建install文件夹
  • 在install文件夹下,分别创建node_global和node_cache文件夹。
  • 创建完之后,node_global和node_cache文件夹路径分别为:
# node_global
F:\nodejs\install\node_global
# node_cache
F:\nodejs\install\node_cache
  1. 完成以上步骤之后,需要在系统变量添加node_global的变量
  • 鼠标移到在“我的电脑”上,右键后,选择“属性”;然后,打开“高级系统设置”;接着,再打开“环境变量”;在“系统环境变量(s)”下,点击“新建”,输入
# node_modules文件夹不需要自行创建,使用npm安装相关包时,自动创建。
变量名:NODE_PATH
变量值:F:\nodejs\install\node_global\node_modules

修改包路径
# 打开cmd,依次执行如下命令
# 查看包的安装路径的命令
npm root -g

# 修改包路径
npm config set prefix "F:\nodejs\install\node_global"
npm config set cache "F:\nodejs\install\node_cache"



2、方案二

  1. 切换到nodejs的安装目录,并找到中找到node_modules\npm.npmrc文件,即:
D:\Nodejs\node-v12.18.2-win-x64\node_modules\npm\.npmrc
  1. 在.npmrc上修改prefix和cache的值,若是没有这两个值,则写添加上去。修改内容如下:
prefix = F:\nodejs\install\node_global
cache = F:\nodejs\install\node_cache



3、验证nodejs

  1. 验证前的说明
  • npm为nodejs自带的包管理器。
  1. 打开cmd,执行以下的命令
# 查看npm的版本
npm -v

# 安装express包,并可以在node_global下的node_modules文件下看的express的文件夹
npm install express -g




六、安装cnpm

  1. 安装cnpm前的说明
    -因为npm安装插件是从国外服务器下载,受网络的影响比较大,可能会出现异常;而cnpm就是解决这个问题。

  2. 安装cnpm

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

# 验证cnpm
cnpm -v




七、验证测试

# 打开cmd,依次执行如下命令
# 下载vue包,并全局安装
npm install -g vue

# 切换到test.js文件所在的目录,运行
node test.js

相关文章

  • vue-001、Vue的基础环境搭建

    一、 环境声明 windows10 二、前期准备 1、node-v12.18.2-win-x64.zip node...

  • vue的todolist

    长话短说,第一步搭建基础页面框架 本次环境在vue-cli中,环境自行在vue官方文档中搭建,所需要的vue基础也...

  • 前端环境搭建

    前端开发环境的搭建 vue环境搭建(node,vue-cli,vue) https://www.jianshu.c...

  • Vue基础环境搭建

    1. 下载安装node.js vue的运行是要依赖于node的npm的管理工具来实现,node可以在官网或者中文网...

  • vue3+ts+electron踩坑记录

    本文包括vue3的基础环境搭建和electron配置,全TS。全部技术栈为:vue3+ts+antdv+vite+...

  • 手动配置一个vue项目小案例

    前言 之前使用vue-cli能成功搭建vue项目环境, 对立面的内容理解的不是很清楚,现在手动搭建一个基础项目 使...

  • vue-001

    ![![8G}H(]EO]E2K1~RC37CFX.png](https://upload-images.jian...

  • vue+ionic

    vue的环境搭建: npm install -g @vue/cli (若已搭建跳过)vue create i...

  • 扣丁学堂HTML5开发之搭建vue开发环境详解

    最近有很多零基础同学反映不会HTML5开发VUE的框架搭建,小编找老师写了一篇关于HTML5培训搭建vue开发环境...

  • Vue之ToDoList实战

    之前的文章windows下搭建vue开发环境,我们已经搭建好了vue的环境,并且写了Vue系列之WebPack与E...

网友评论

      本文标题:vue-001、Vue的基础环境搭建

      本文链接:https://www.haomeiwen.com/subject/dijfkktx.html