vue.js安装

一、下载和引入

vue官网:https://cn.vuejs.org/v2/guide/installation.html
开发环境 https://vuejs.org/js/vue.js
生产环境 https://vuejs.org/js/vue.min.js

简单安装运行,安装步骤

  1. 官网下载vue.js,右键链接另存为。
  2. idea新建工程,打开idea ->Create New Projec->Empty Project。
  3. 新建module。
  4. 选中static web,静态web项目。
  5. 项目右键,新建js文件夹,NEW->Directory,把下载的vue.js文件放到该目录下。
  6. 新建src文件夹,NEW->HTML文件。

二、直接CDN引入或者也可以直接使用公共的CDN服务

<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者:<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

三、npm安装,需要node环境

1.下载Node.js。

下载地址:https://nodejs.org/en/

2.下载好后点击安装。

vue的javascript库版本过低 如何升级_javascript

3.安装完成后在控制台输入:node -v,查看node版本。

4.Node自带了NPM了,在控制台输入:npm -v查看。

vue的javascript库版本过低 如何升级_vue.js_02

5.更改默认的全局目录,默认全局目录是C:\Users\Administrator\AppData\Roaming\npm\node_modules。

5.1设置缓存和全局文件路径配置,默认是c盘,我这里设置到F盘。(如果命名设置不好用,重启电脑,最终办法更修改.npmrc文件,在.npmrc文件加上如下代码 )

cache "F:\server\tools\nodejs\node_cache"

prefix "F:\server\tools\nodejs\node_global"

设置缓存文件夹 npm config set cache "F:\server\tools\nodejs\node_cache"

设置全局模块存放路径 npm config set prefix "F:\server\tools\nodejs\node_global"

设置成功后,之后用命令安装模块就在F:\server\tools\nodejs\node_global里

5.2 配置环境变量。

'nrm' 不是内部或外部命令,也不是可运行的程序或批处理文件。

因为vue脚本在自定义的global目录下,不在path环境变量这时候,我们需要在环境变量path中添加 F:\server\tools\nodejs\node_global系统变量设置:添加变量 NODE_PATH 值为:F:\server\tools\nodejs\node_modules





vue的javascript库版本过低 如何升级_vue.js_03

 

vue的javascript库版本过低 如何升级_javascript_04

 

vue的javascript库版本过低 如何升级_前端_05

6.npm默认的仓库地址是在国外网站,速度较慢,建议大家设置到淘宝镜像。

但是切换镜像是比较麻烦的。推荐一款切换镜像的工具:nrm我们首先安装nrm,这里-g代表全局安装。可能需要一点儿时间在控制台输入:npm install nrm -g完成后的界面如下:

vue的javascript库版本过低 如何升级_javascript_06

7.通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库。

此时报错 internal/validators.js:124 throw new ERR_INVALID_ARG_TYPE(name, 'string', value)。



vue的javascript库版本过低 如何升级_前端_07


 解决方法


//找到cli.js文件,找到 17 行,注释掉原先代码,替换成
// const NRMRC = path.join(process.env.HOME, '.nrmrc');
const NRMRC = path.join(process.env[(process.platform == 'win32') ? 'USERPROFILE' : 'HOME'], '.nrmrc');


vue的javascript库版本过低 如何升级_vue.js_08

 

vue的javascript库版本过低 如何升级_vue.js_09

再次执行nrm ls ,成功。通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库。

vue的javascript库版本过低 如何升级_前端框架_10

通过nrm use taobao来指定要使用的镜像源。

vue的javascript库版本过低 如何升级_前端框架_11

通过nrm test npm来测试速度。(nrm test 表示测试所有镜像源的速度。)



vue的javascript库版本过低 如何升级_ecmascript_12


8.springboot新建vue工程。

  1. 创建工程。
  2. 创建一个新的空工程。
  3. 然后新建一个module。
  4. 选中static web,静态web项目。



vue的javascript库版本过低 如何升级_vue.js_13


找到hello-vue目录,cmd运行命令 npm init.



vue的javascript库版本过低 如何升级_前端框架_14

 

vue的javascript库版本过低 如何升级_javascript_15

 

vue的javascript库版本过低 如何升级_ecmascript_16

 然后刷新工程,就会多出一个package.json.



vue的javascript库版本过低 如何升级_ecmascript_17


执行 npm install vue --save,安装vue。(上边在文件目录里执行cmd命令,在idea里也可以执行cmd命令,效果是一样的。)



vue的javascript库版本过低 如何升级_javascript_18


然后刷新项目,项目多了node-modules文件

创建一个html文件,游览器运行即可。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <p>你好,我是{{name}}</p>
</div>
</body>
<!--引入vue.js,不能用script简写模式,否则引用不到-->
<!--<script src="node_modules/vue/dist/vue.js"/>-->
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el:"#app",
        data:{
            name:'java'
        }
    });
</script>
</html>