安装使用VUE

最新推荐文章于 2024-08-11 23:16:38 发布
最新推荐文章于 2024-08-11 23:16:38 发布
阅读量273 收藏
点赞数
分类专栏： 前端 文章标签： 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li420520/article/details/83587162
版权

安装使用VUE
如果是简单实用vue的话，可以直接引用js文件。

https://vuejs.org/js/vue.js
但是在构建大型项目的时候推荐使用NPM安装，NPM能够很好的和诸如webpack或Browserify模块打包器配合使用，同时Vue也提供配套工具来开发单文件组件。

  1. 安装nodejs

由于npm（nodejs package manager）是nodejs的包管理器，所以要首先安装nodejs，从官网下载相应版本安装即可https://nodejs.org/en/download/。

安装好后打开命令行工具，输入node就进入nodejs的命令模式了：

C:\Users\wangjun>node

1+2
3

按两次Ctrl+C或者输入.exit就可以退出命令行了。

  1. 安装淘宝NPM镜像

由于在国内npm的安装速度太慢，因此可以使用淘宝镜像及其命令cnpm来安装各种包。

安装npm淘宝镜像：

npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成后，后面就可以使用cnpm命令来安装npm包了。

cnpm install {package name}
3. 安装VUE

安装稳定版

cnpm install vue
安装完成后默认在用户路径下：

C:\Users{user_name}\node_modules
在vue包的dist/目录下可以看到Vue.js的各种版本，其中带min的是生产环境的版本，比开发版本vue.js压缩了很多，并且删除了警告。

  1. 使用VUE

新建三个文件,其中vue.js需要从网上下载：

my.html
my.js
vue.js

4.1 新建my.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>my html</title>
</head>          前端交流学习；582735936
<body>
    <div id="app">
        {{message}}
    </div>
</body>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="my.js"></script>
</html>

4.2 新建my.js

var app1 = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
})

至此vue的是安装和简单使用就完成了。

4.3 遇到的问题

1）报错

Vue is not defined

Uncaught ReferenceError: Vue is not defined
    at my.js:1

原因

先引用了my.js，后引用了vue.js。

解决方案

应该先引用vue.js，后引用my.js才能在my.js中使用vue的语法。

2）报错[

Vue warn]: Cannot find element: #app

[Vue warn]: Cannot find element: #app

原因

我把相关的js文件放在head里面，导致文件未加载完成就运行js文件，所以js找不到 #app 。

解决方案

把相关js文件放至尾部，保证页面全部渲染完成才加载js，就可以避免这个错误。

Android开发者小P
关注
专栏目录
「Vue3系列」Vue3简介及安装
日常笔记/总结/系列知识梳理
03-01 1631
Vue3是Vue.js框架的第三个主要版本，于2020年9月18日发布，代号为“One Piece”。Vue3在性能、体积、TypeScript支持、API设计等方面都有显著的提升和改变。性能提升：Vue3通过源码的升级，如使用Proxy代替defineProperty实现响应式，重写虚拟DOM的实现和Tree-Shaking，使得打包大小减少了41%，初次渲染速度提升了55%，更新渲染速度提升了133%，内存减少了54%。
VUE安装
yycnf的博客
08-27 233
vue的安装过程 1、徽标键+R，打开命令窗口。输入cmd命令打开小黑框,输入node-v（检测node版本号）和cnpm -v（检测cnpm的版本号） 如果没有安装cnpm，需要先安装cnpm 2、安装vue脚手架指令 一般都是全局安装：cnpm i -g @vue/cli 如下图就代表安装成功 3、在D盘、E盘，或F盘创建新文件夹（名字不能是汉字） 4、进入新文件夹，在地址栏输入cmd，回车。 5、在第4步执行完后，会弹出一个小黑框，输入vue create 项目名.
VUE安装使用手册
最新发布
qq_54523931的博客
08-11 1131
注意：无论你使用哪种操作系统，必须保证当前登录的用户具有最高访问权限，例如，在Windows操作系统中，请使用管理员模式的命令提示符，并且，不要使用Power Shell，在Mac OS中，请使用 sudo来执行以上命令。通常用vue命令来创建VUE CLI工程，并且会将工程创建在执行命令时的位置，所以，可以先进入准备存放项目的文件夹再创建项目。@vue/cli的好处：开箱即用，支持webpack/babel/css/less/开发服务器支持。可以看到当前的VUE Cli：@vue/cli 5.0.8。
vue安装及使用
huangshulang1234的博客
01-17 501
一、webstorm的安装： 1、什么是webstorm WebStorm是jetbrains公司旗下一款JavaScript 开发工具，和IntelliJ IDEA同源。 再多的，可以 2、webstorm安装 一位大神整理的webstorm安装教程，我是按照这个教程安装的。 https://blog.csdn.net/xunciy/article/details/77345663 ...
安装vue-li
qq_42453104的博客
04-21 789
安装vue-li 2020年4月21日，我决定开始从CSND上记录工作中遇到的一些问题及具体的解决思路，以便以后碰到同类问题之后重复踩雷，也是对工作的一个小总结吧。希望自己可以坚持下来把这件事情一直做下去。 ...
Vue 组件间的通信(1)
2401_84436058的博客
04-29 557
父组件向子组件传递数据。：自定义事件。：插槽分发内容，带上标签数据一起传输，主要是父组件想子组件传输。组件间通信规则。
vue3.0安装使用vue-i18n实时切换语言 不用刷新
qq_37482427的博客
03-25 5329
vue3.0安装使用vue-i18n实时切换语言
Vue-router的安装使用详细讲解
m0_57135756的博客
09-21 1489
特别注意:路由携带params参数时,若使用to的对象写法,则不能使用path的路径写法配置,必须使用name配置!跳转
安装vue-cli&使用vue-cli搭建项目
qq_64001795的博客
09-26 4934
vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板。xxx 为自己创建项目的名称必须先安装vue,vue-cli，webpack，node等一些必要的环境*.vue 文件，是一个自定义的文件类型，用类似HTML的语法描述一个Vue组件。每个.vue文件包含三种类型的顶级语言块 , 和 。这三个部分分别代表了 html,js,css。
Vue安装使用
weixin_51975133的博客
02-23 525
vue.js脚手架的安装与使用 第一步，安装node.js 安装包下载地址：https://nodejs.org/en/ ​ 安装包下载安装完成后，在命令行使用 node -v 查看node版本，判断是否安装成功。 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9H2pIw4l-1614042645110)(C:\Users\Administrator\AppData\Local\Temp\1612835699543.png)] 第二步，安装vue脚手架 安装淘宝镜像： np
安装vue
weixin_44111797的博客
10-25 826
①安装node环境 下载node.js 一直next(可以手动改一下安装的位置) 安装后用 node -v 和 npm -v检验一下 (npm包管理器是集成 在node中的，所以安装了node也就有了npm) ②安装脚手架 使用淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org 未安装镜像：npm install -g @vue/cli 如果安装了taobao镜像：cnpm install -g @vue/cli .
Vue安装及使用
m0_69699237的博客
08-07 537
我们之前的vue和我们的java代码是不是都在一个工程下。企业中前端也会由自己的服务器，也有自己的开发工具。因为前端项目也需要依赖一些插件:比如:axios elementui 那么我们可以使用npm下载并安装到当前项目。安装的命令: npm install -g @vue/cli。3.验证是否安装完成: 打开cdm命令（win+r）输入命令。脚手架的作用:就是用来帮你创建前端vue工程。验证是否安装完成: 打开cdm命令（win+r）输入命令。随便点开一个就能看到我们的Vue网页。在我们的控制台下输入。.
vue的安装和使用
HaoTiantian1的博客
06-04 357
1、首先我们安装安装git工具 2、安装node,检查node安装是否成功，在git工具中输入node -v，如果安装成功，会显示版本号，那么就安装成功了。 这就是安装成功后显示的node版本号。 3、检查npm是否安装成功，在git工具中输入npm(npm一般随node 一起安装在电脑中，node如果成功了，npm基本都会没问题)。 显示出这样的代码说明npm也安装成功了。 4、cnpm安装参考网站：https://developer.aliyun.com/mirror/NPM?from=tnpm 在gi
vue 的安装
qq_21344887的博客
04-29 298
vue 的安装 1. 下载安装 node.js node.js 是一个 js 运行环境，Vue 工程需要建立在 node.js 的基础上。 npm 是 node.js 的包管理器，npm（node package manager） 通过 npm 完成一些环境的安装 https://nodejs.org/en/download/ 下载 LTS 版，长期维护的。 下载之后直接安装。 默认安装路径 c:\Program Files\nodejs,可以自行安装修改 安装成功之后，如何检测是否成功？ node -v
Vue安装
ll3128162371的博客
08-13 277
Vue初步创建
vue的安装
m0_56252291的博客
02-17 212
1.安装node.js https://nodejs.org/en/download/ 2.安装vue-cli win+r cmd npm install --global vue-cli 3.安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org 4.创建一个vue项目 准备一个文件夹XXX(你的命名) cmd进入这个文件所在的目录 vue init webp...
安装使用vue-element-admin
05-07
Vue-element-admin 是一个基于Vue.js和element-ui的后台管理系统解决方案，它提供了丰富的功能组件和示例页面，可以帮助你快速构建一套完整的后台管理系统。下面是安装使用vue-element-admin的步骤： 1. 安装Node.js和npm：在官网上下载安装包，安装完成后检查是否安装成功： ``` node -v npm -v ``` 2. 全局安装vue-cli： ``` npm install -g vue-cli ``` 3. 从github上下载vue-element-admin代码： ``` git clone https://github.com/PanJiaChen/vue-element-admin.git ``` 4. 进入vue-element-admin目录，安装依赖： ``` cd vue-element-admin npm install ``` 5. 启动项目： ``` npm run dev ``` 6. 访问 http://localhost:9528/ 就可以看到项目的页面了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值