[笔记]vue从入门到入坟《一》helloworld 环境及安装

简介: [笔记]vue从入门到入坟《一》helloworld 环境及安装

安装

在线版

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

离线版2.6.14

https://github.com/vuejs/vue/tree/dev/dist/vue.js

vuedevtool调试工具安装

直接去Chrome 的谷歌应用商店搜索 vuejs devtool

github安装

git clone https://github.com/vuejs/devtools

Idea 安装vuejs插件

下载插件

https://plugins.jetbrains.com/plugin/9442-vue-js/versions/stable

找到idea版本对应的vue插件

安装

Idea内 Setting->Plugins->齿轮->install from disk

选择你vue插件目录下lib/vuejs.jar

哦 别忘了把vuejs目录放在idea插件目录

例如

D:\idea\IntelliJ IDEA 2019.2.4\plugins\vuejs\lib\vuejs.jar

创建项目

idea创建empty Project

然后

创建js目录,放入vue2.6.js离线版

创建html文件

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue01HelloWorld</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">
    <p>{{message}}</p>
</div>
<script type="text/javascript" src="js/vue2.6.js"></script>
<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->
<!-- 生产环境版本,优化了尺寸和速度 -->
<!--<script src="https://cdn.jsdelivr.net/npm/vue"></script>-->
<script type="text/javascript">
    new Vue({
        el:'#app',
        data:{
            message:'vue.js大爷你好!'
        }
    })
</script>
</body>
</html>

运行调试

运行

调试F12

会发现有个vue面板



相关文章
|
1天前
|
JavaScript
Vue中的watch是如何实现深度监听的?
Vue中的watch是如何实现深度监听的?
8 2
|
1天前
|
JavaScript
Vue中如何处理异步组件的加载错误?
Vue中如何处理异步组件的加载错误?
8 1
|
1天前
|
JavaScript
vue知识点
vue知识点
14 8
|
2天前
|
JavaScript
Vue中动态Class实战
Vue中动态Class实战
8 0
|
2天前
|
前端开发 JavaScript
Vue+Swiper实现轮播图效果
Vue+Swiper实现轮播图效果
7 1
|
2天前
|
JavaScript 前端开发
vue实现选中效果
vue实现选中效果
7 0
|
2天前
|
JavaScript
Vue中如何实现组件的动态注册?
Vue中如何实现组件的动态注册?
13 2
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
972 0
|
2天前
|
JavaScript 前端开发
Vue中的内置指令有哪些?
Vue中的内置指令有哪些?
10 2
|
2天前
|
缓存 JavaScript 开发者
Vue中的自定义指令有什么作用?
Vue中的自定义指令有什么作用?
10 0

相关产品

  • 云迁移中心