• win7 x64位 下安装 Vue 开发环境


    一、安装nodejs

    Node.js 是一个开源与跨平台的JavaScript 运行时环境

    在 nodejs官网 https://nodejs.org/en/ ,下载最新版本,发现nodejs最新版本不在支持win7系统

    选择nogdejs版本(12.18.4)

    所以找个可以支持window7的版本(12.18.4),安装后效果如下

    下载安装

    https://nodejs.org/zh-cn/download/releases/

     选择对应的版本就行,我这边win7,64位选择是的node-v12.18.4-x64.msi这个安装版.,下载后双击安装下就可以使用了

    这里我 安装的是 c:\Program Files\nodejs\   目录下(默认)

    之后一直下一步安装就可以了

    检测nodejs安装
    当执行完上步安装包安装后,需要进行安装是否成功,win+r打开运行,输入cmd后进入命令行界面。

    分别输入node -v  和  npm -v  命令进行node的版本号和npm的版本号的查看。

    二、安装完毕后,配置node.js

    配置npm安装全局模块路径与缓存路径
    NPM是随同NodeJS一起安装的包管理工具

    一般,在进行npm install ...等命令全局安装时,默认的会将模块安装C:\Users\用户名\AppData\Roaming路径下的npm和npm_cache中。

    此时可不进行修改,但便于对C盘数据进行管理,此时这里配置我们自定义的全局模块安装路径和缓存路径,在当前的nodejs安装目录下新建两个文件夹,分别为   node_global   和  node_cache 

    此时需要win+r打开运行,输入cmd进入命令行界面,分别输入以下内容执行

    npm config set perfix "c:\Program Files\nodejs\node_global"
    npm config set cache "c:\Program Files\nodejs\node_cache"


     

    配置一个镜像站,为了提升速度,

    输入命令 npm config set registry=http://registry.npm.taobao.org   配置镜像站

    检查一下镜像站 是否可用命令

    npm config get registry

    更新一下npm

    npm install npm -g
     

    node环境变量配置
    系统变量  中新建 NODE_PATH  值为 C:\Program Files\nodejs\node_modules

    注:下面 修改 用户变量 的步骤 我测试并没有成功,vue还是安装 在   C:\Users\Administrator\AppData\Roaming\npm  目录下。

    所以这步不用改, 也是好用的。

    用户变量 中编辑 用户变量的path,修改对应的 npm的路径值为上文中自定义的node_global路径

    C:\Users\Administrator\AppData\Roaming\npm

    改为

    C:\Program Files\nodejs\node_global

      改为    

    三、安装 Vue 

    Vue.js(/vjuː/,或简称为Vue)是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架。

    安装vue-cli
    vue-cli 是一个官方发布vue.js 项目脚手架,一个专门为单页面应用快速搭建繁杂的脚手架,它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

    运行cmd调出命令行窗口。命令行里输入:npm --version,显示npm版本大于3.0才能安装vue-cli。

    执行  npm install -g @vue/cli     

    安装Vue
    执行  npm install vue -g

    在 global  的模块目录下就能找到 vue

    安装Vue-router
    这里的路由就是SPA(单页应用)的路径管理器。再通俗的说,vue-router就是WebApp的链接路径管理系统。

    执行  npm install vue-router -g

    查看vue版本

    执行  vue -V

     运行 Demo

    四、新增一个Vue项目 运行Demo

    在 C盘 根上 新建 myVue 进入 再建 VueDemo

    C:\myVue\VueDemo

    运行  ->  cmd

    执行  cd..  退到 C盘根目录中

    执行  cd myVue  进入刚刚新建的目录中   C:\myVue\VueDemo
     

     初始化,安装依赖

     执行   npm install -g @vue/cli-init

    初始化 Vue 项目

     执行  vue init webpack vue01

    期间会需要输入 回车

    期间会询问 是否 Yes/No  输入 y 回车

    期间会让进行选择,选择默认就可以

     期间会出现一会 警告

     最终会出现

     进入 vue01目录

     安装依赖

     执行   npm install  

     运行
     npm run dev

     

     

     最终出现  http://localhost:8080

    在浏览器中访问,出现下图说明 Vue 安装成功,已经运行Demo

     按 Ctrl + V  后输入  y 退出

     打包
     npm run build

     

     

    此时在  C:\myVue\VueDemo\vue01  目录 会有 dist目录,这个目录下就是编译好的文件

     

    -------------------------------------------------------------------------------

     十分感谢  的分享

    https://blog.csdn.net/weixin_42900442/article/details/120855416

  • 相关阅读:
    Java使用Apache Commons Exec运行本地命令行命令
    Win10安装PostgreSQL9.6
    软件工程学习笔记——软件工具
    软件工程学习笔记——软件过程模型
    软件工程学习笔记——软件过程
    软件工程学习笔记——软件生存周期
    软件工程学习笔记——软件工程基本原理
    MySQL学习笔记——MySQL5.7的启动过程(一)
    Windows下免费的屏幕录制软件——EV录屏——推荐
    SecureCRT 8.1破解方式
  • 原文地址:https://www.cnblogs.com/hailexuexi/p/16650625.html
Copyright © 2020-2023  润新知