Vue学习 之 第一个Vue应用

第一个 Vue 应用

  1. 安装WebStorm

在这之前,已下载安装好了WebStorm。

  1. 打开WebStorm,点击”+“就可以创建一个新的应用。
    Vue学习 之 第一个Vue应用_第1张图片
    项目文件目录地址: /Users/morris/WebstormProjects
    Vue学习 之 第一个Vue应用_第2张图片
    或者在 file -> new priject 也可以新建一个项目

  2. 新建一个 html 文件

file -> new -> HTML File
Vue学习 之 第一个Vue应用_第3张图片
新建 index.html 文件后,自动生成如下代码
Vue学习 之 第一个Vue应用_第4张图片
在 body 里面添加 hello world,之后将文件拖拽到Chroom浏览器里,页面就显示出来了

Vue学习 之 第一个Vue应用_第5张图片
4. 引入 Vue

使用CND的方式引入Vue.js,bootCDN这个网站,https://www.bootcdn.cn/里,选择Vue
Vue学习 之 第一个Vue应用_第6张图片
到Vue这个库的链接里
Vue学习 之 第一个Vue应用_第7张图片
选择 min.js 的,点击复制script标签,然后将复制的代码粘贴到 header 中去,如下图
Vue学习 之 第一个Vue应用_第8张图片
如果是公司内网下使用,可以将js下载下载,引入到项目里面来也可以。

  1. 使用Vue
DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello Vuetitle>
    <style>
        .text {
            color: red;
        }
    style>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js">script>

head>
<body>
<div class="text" id="app">
    hello world
    {{msg}}
div>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'Hello Vue'
        }
    })
script>
body>
html>

Vue学习 之 第一个Vue应用_第9张图片
6. 编译调试

点击代码编辑区右上角的浏览器可以直接打开在浏览器里调试,效果如下:

Vue学习 之 第一个Vue应用_第10张图片

如果报如下错误:

Uncaught ReferenceError: exports is not defined

Uncaught ReferenceError: Vue is not defined

Vue学习 之 第一个Vue应用_第11张图片
则可能是 Vue 没有加载到项目中,换一个 cript src 脚本地址试试。

你可能感兴趣的:(#,Vue,vue.js,javascript)