Vue学习笔记（一）

编码工具：Visual Studio Code

注：汉化操作如下

Vue中文官方文档：https://cn.vuejs.org/

下载js：（vue.js：开发版本-包含完整的警告和调试模式；vue.min.js:生产版本-删除了警告，33.30KB min+gzip）

以上为准备工作。接下来开始Hello world之旅！

1.首先建如下文件夹

2.新建2个文件index.html和helloworld.hml

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue2.0实列</title>
</head>
<body>
    <h1>Vue2.0实列</h1>
    <hr>
    <ol>
        <li><a href="./example/helloworld.html">Hello world实列</a></li>
    </ol>
    
</body>
</html>

helloworld.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>

    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>HelloWorld</h1>
    <hr>
    <div id="app">{{message}}</div>

    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                message:'Hello World!'
            }
        })
    </script>
</body>
</html>

3.安装live-server（live-server是一个具有实时重载功能的小型开发服务器。用它来热加载HTML / JavaScript / CSS文件，但不能用于部署最终的网站系统。）

a.初始化npm:npm init

b.安装live-server：cnpm install -g live-server

c.启动live-server：live-server

注：live-server在安装过程中遇到以下问题：

a.cnpm : 无法加载文件 C:\Users\Lenovo\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。

b.npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。

（1）以管理员身份运行

（2）第一步：检查是否安装了cnpm, 查看一下你是否安装了cnpm

　　npm list --depth=0 -global

　　　若没有安装：执行下面命令安装镜像

　　npm install -g cnpm --registry=https://registry.npm.taobao.org

　　　第二步：安装以后终端输入指令cnpm -v 还是提示标题问题，则应是路径没有被识别造成的, 需要我们手动把cnpm目录添加到Path中

posted @ 2020-06-11 06:09 樱花树下的蓝天阅读(239) 评论(0) 收藏举报

刷新页面返回顶部

Vue学习笔记（一）

公告