zoukankan      html  css  js  c++  java
  • Vue环境搭建 & 附Vue-cli脚手架3.0前后版本切换方法

    Vue环境搭建

    步骤概括:

    (1)  下载安装node.js

    (2)  设置node的全局和缓存路径

    (3)  安装淘宝镜像

    (4)  设置环境变量

    (5)  安装Vue

    (6)  安装Vue-cli脚手架

    (7)  创建一个Vue项目

    附:

    Vue-cli脚手架3.0前后版本切换方法

    1、下载安装node.js

    下载地址:

    官网:https://nodejs.org/en/

    中文网(下载快,推荐使用):http://nodejs.cn/download/

    可点击阿里云镜像

     

    https://npm.taobao.org/mirrors/node/v14.15.4/

    可在该地址后面修改想要下载的版本号,然后选择32或64位的.msi文件下载:

     

    下载后安装:

     

     

     

    修改安装位置:

     

    按照默认即可,

     

    继续下一步,不用勾选:

     

     

     

    2、设置node的全局和缓存路径

    在node.js的安装路径下,新建node_global和node_cache两个文件夹

     

    按Win+R,进入cmd控制台:

    设置缓存路径(路径为缓存文件夹的路径):

    npm config set cache "E:InstallationPositionwork odejs ode_cache"

    设置全局模块的存放路径:

    npm config set prefix "E:InstallationPositionwork odejs ode_global"

     

    设置成功后,以后要安装XXX模块,用命令npm install XXX -g,就会放在全局模块的路径里

    3、安装淘宝镜像(基于 Node.js 安装cnpm

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

     

    安装完成

    4、设置环境变量

    设置环境变量的目的是在任何目录都可以执行node和vue命令。

    (1)新增Path路径(全局文件夹路径)“E:InstallationPositionwork odejs ode_global”

    进入环境变量界面,双击下面的Path,

     

    点击新建,将全局文件夹的路径复制进来,点击确定:

     

    (2)新增系统变量NODE_PATH

     

     

    5、安装Vue

    一定要确定将上面的设置环境变量的窗口点击确定并关闭,并且需要先关上命令行窗口,再次打开cmd,执行下面的安装Vue命令,才可正常执行:

    cnpm install vue -g  (此处使用的是上面安装的淘宝镜像cnpm命令)

     

    6、安装Vue-cli脚手架

     

     

    7、创建一个Vue项目

    自己在某个位置新建一个文件夹,用来存放vue项目:

    例如:

     

    关闭命令行窗口再次打开,进入到刚才新建文件夹的路径下:

     

    在当前目录下输入“vue init webpack-simple 项目名称(使用英文)”。

    注意项目名不能包含大写字母:

     

    cd test

    npm install

     

     

    运行:

    cnpm run dev

     

     

    ===========================================================================

    Vue-cli脚手架3.0前后版本切换方法:

    (一)3.0以下--->3.0以上

     

    (1)    先卸载vue3.0之前的

    npm uninstall -g vue-cli

    当前版本:

     

    卸载:

     

    (2)  安装3.0之后的

    npm install -g @vue/cli

     

     

    (3)  安装中若出错运行下面的三个命令进行更新

    npm i npm -g    更新npm

        npm i @vue/cli -g 更新3.0之后的版本

        cnpm i @vue/cli -g  更新淘宝镜像的版本

    即可。

    升级之后:

     

    (二)3.0以上--->3.0以下

     

    即uninstall和install的两个内容互换。

    参考链接:https://www.bilibili.com/video/BV1bv411v7ye/?p=2

  • 相关阅读:
    RTLabel 富文本
    代码复用,优化时间
    (转)分享一些免费的接口.无意中查找资料发现
    新手之使用git
    ios 清理缓存
    (转)IOS崩溃 异常处理(NSSetUncaughtExceptionHandler)
    UIApplication的理解
    新提交审核app保留检查更新入口将被拒绝
    (转)免费天气预报接口API以及全国所有地区代码!!
    Cesium快速上手9-Camera和Scene中的其他函数使用
  • 原文地址:https://www.cnblogs.com/wang-jx/p/14297741.html
Copyright © 2011-2022 走看看