Vue实现前后端分离

最新推荐文章于 2024-03-31 14:54:58 发布

weixin_44961111

最新推荐文章于 2024-03-31 14:54:58 发布

阅读量823

点赞数

文章标签： vue npm nodejs

本文链接：https://blog.csdn.net/weixin_44961111/article/details/110310225

版权

Vue

MVVM思想

M：module 包括数据和一些基本操作
V：view 视图，页面渲染结果
VM：View-module，模型与视图间的双向操作（无需开发人员干涉）
视图和数据通过VM绑定起来，模型里有变化会自动地通过Directives填写到视图中，视图表单中添加了内容也会自动地通过DOM Listeners保存到模型中。

教程：

Vue: https://cn.vuejs.org/v2/guide/
ElementUI: https://element.eleme.cn/#/zh-CN/component/installation

安装：

直接下载并用 < script > 标签引入
或者在VScode控制台使用npm install vue导入。

先np init -y初始化项目，生成了一个package.json文件，说明他是一个npm管理的项目
npm install vue，安装后在项目node_modules里既有vue

下载vsCode用于前端管理系统。在vsCode里安装插件。

Auto Close Tag
Auto Rename Tag
Chinese
ESlint
HTML CSS Support
HTML Snippets
JavaScript ES6
Live Server
open in brower
Vetur

为了方便的在浏览器上调试VUE程序，需要安装vue-devtools，编译后安装到chrome中即可
详细的使用方法见：Vue调试神器Vue调试神器vue-devtools安装安装
如下

测试：
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <input type="text" v-model="num">
        <button v-on:click="num++">点赞</button>
        <button v-on:click="cancle">取消</button>
        <h1> {{name}} ,非常帅，有{{num}}个人为他点赞{{hello()}}</h1>
    </div>

    <!-- 导入依赖 -->
    <script src="./node_modules/vue/dist/vue.js"></script>

    <script>
        //1、vue声明式渲染
        let vm = new Vue({ //生成vue对象
            el: "#app",//绑定元素 div id="app"
            data: {  //封装数据
                name: "张三",  // 也可以使用{} //表单中可以取出
                num: 1
            },
            methods:{  //封装方法
                cancle(){
                    this.num -- ;
                },
                hello(){
                    return "1"
                }
            }
        });

        //2、双向绑定,模型变化，视图变化。反之亦然。

        //3、事件处理

        //v-xx：指令

        //1、创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，响应式的
        //2、指令来简化对dom的一些操作。
        //3、声明方法来做更复杂的操作。methods里面可以封装方法。

    </script>
</body>

</html>

在VUE中el,data和vue的作用:

el：用来绑定数据；
data:用来封装数据；
methods：用来封装方法，并且能够封装多个方法，如何上面封装了cancell和hello方法。

安装“Vue 2 Snippets”，用来做代码提示
在这里插入图片描述

用VSCode打开renren-fast-vue

安装node：http://nodejs.cn/download/ 选择windows下载。下载完安装。

NPM是随同NodeJS一起安装的包管理工具，如JavaScript-NPM，java-Maven。

命令行输入node -v 检查配置好了，配置npm的镜像仓库地址，执行

node -v
npm config set registry http://registry.npm.taobao.org/

然后去VScode的终端中输入 npm install，会报错，然后进行如下操作：

首先确保安装了python3.0以上版本，并配置全局变量
其次大部分错误是报node-sass4.9.0安装失败。
执行以下步骤可以完美解决
首先把项目文件夹下的package.json里面的node-sass4.9.0改成4.9.2（不改可能也没关系，不过我改了，防止踩坑）
然后项目文件夹下打开cmd命令窗口（和Visual Studio Code的终端命令是一样的）（我在VScode中不成功，还是用cmd吧，在cmd中注意切换到renren-fast-vue项目目录）
执行：
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/
等待挺长时间，执行成功看看有没有报错，如果没报错执行下面命令
npm install ，
没报错就是安装成功，然后在下面目录下使用npm run dev （运行项目）就ok了
注：这么做得原理就是先单独从淘宝镜像吧nod-sass下载下来，然后再进行编译，因为这句命令好像是不成功的，（npm config set registry http://registry.npm.taobao.org/），默认从github下载，导致报错的
如果之前安装失败的。先清理缓存
清理缓存：npm rebuild node-sass
npm uninstall node-sass
或采用：
先把node_modules全部删除，然后再npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver，最后npm install。

浏览器输入localhost:8001 就可以看到内容了，登录admin admin

在这里插入图片描述

weixin_44961111

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
Vue实现前后端分离

VueMVVM思想M：module 包括数据和一些基本操作V：view 视图，页面渲染结果VM：View-module，模型与视图间的双向操作（无需开发人员干涉）视图和数据通过VM绑定起来，模型里有变化会自动地通过Directives填写到视图中，视图表单中添加了内容也会自动地通过DOM Listeners保存到模型中。教程：Vue: https://cn.vuejs.org/v2/guide/ElementUI: https://element.eleme.cn/#/zh-CN/
复制链接

扫一扫