Vue/Vue-cli入门教程

最新推荐文章于 2024-05-16 13:10:03 发布

玛莱之盾

最新推荐文章于 2024-05-16 13:10:03 发布

阅读量487

点赞数 1

分类专栏：前端文章标签： vue javascript js 前端

本文链接：https://blog.csdn.net/naexting/article/details/119896676

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Vue

vue也是看狂神的讲的一般但是时长短，很多都没讲，vue重点是vue-cli脚手架的使用。建议b站找黑马程序员或者尚硅谷，讲的比较全。
MVVM模式

vue重要性：完全解耦了View层和Model层，这个解耦是至关重要的，是前后端分离的重要一环。

1.第一个Vue程序

IDEA插件：vue，下载不了的要去官网下载到本地，然后导入zip，注意选择对应版本

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

导包：下载文件官网

或者：在线cdn

完整版：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入Vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<!--view层模板-->
<div id="app">
    {{message}}
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"hello,vue"
        }
        })
</script>

</body>
</html>

2.基本语法

2.1、判断-循环

v-开头的属于指令

v-bind绑定信息

 <span v-bind:title="message">
    鼠标悬停几秒查看动态绑定的信息
</span>

v-if,v-else

<body>
<!--view层模板-->
<div id="app">
    <h1 v-if="ok">Yes</h1>
    <h1 v-else>no</h1>
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            ok:true
        }
    })
</script>
</body>

v-for

<div id="app">
    <ul>
        <li v-for="item in items">
            {{item.message}}
        </li>
    </ul>
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            //数组[],{}表示对象
            items:[
                {message:'狂神说java'},
                {message: '狂神说前端'}
            ]
        }
    })
</script>

2.2、事件绑定

<body>
<!--view层模板-->
<div id="app">
   <button v-on:click="sayhello">
       点我
   </button>
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"sjk"
        },
        //方法必须定义在Vue的methods中
        methods:{
            sayhello: function (){
                alert(this.message+"hello")
            }
        }
    })
</script>

</body>

3.双向绑定

<!--view层模板-->
<div id="app">
   <p>
       输入的文本:<input type="text" v-model="message">{{message}}
   </p>
    下拉框:
    <select v-model="selected">
        <option value="" disabled >--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <p>选中了:{{selected}}</p>
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data:{
            message:"",
            selected:" "
        }
    })
</script>

4.vue组件

自定义标签

<div id="app">
    <sjk v-for="item in items" v-bind:ss="item"></sjk>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    //组件必须放到vue对象那个标签里
    //第一个是标签名，第二是属性
    Vue.component("sjk",{
        //使用props参数传递
        props:['ss'],
        template:'<li>{{item}}</li>'
    });

    var vm=new Vue({
        el:"#app",
        data:{
            message:"",
            data: {
                items:["java","c","C++"]
            }
        }
    })
</script>

5.网络通信

Axios是一个开源的可以在浏览器端和Nodejs的异步通信框架，主要作用是实现AJAx异步通信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Axios异步通信</title>
</head>
<body>
<div id="vue">
    <div>
        {{info.name}}
    </div>
    <div>
        {{info.address.city}}
    </div>
    <a v-bind:href="info.url">点我</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script >
    var vm=new Vue({
        el:"#vue",
        //data属性
        //data方法,数据格式是什么样的就是这么写
        data(){
            return{
                info:{
                    name:null,
                    address:{
                        street:null,
                        city:null,
                        country:null
                    }
                },
                url:null,
            }
        },
        //钩子函数,链式编程，ES6特性
        mounted(){//返回数据
            axios.get('data.json').then(response=>(this.info=response.data))
        }
    });

</script>

</body>
</html>

{
  "name":"狂神说java",
  "url": "http://baidu.com",
  "page": 1,
  "isNonProfit":true,
  "address": {
    "street": "含光门",
    "city":"陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "4399",
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

6.计算属性(特色)

讲计算出的结果保存在属性中，，可以想象是一个缓存

<div id="app">
<!--    函数调用-->
<p> currentime1:{{currentime()}}</p>
<!--属性调用，-->
<!--    不常计算的值，可以放在计算属性中，类似于缓存，省了每次都调用-->
<p> currentime1:{{currentime2}}</p>
</div>

<script>
    var vm=new Vue({
        el:"#app",
        data: {
            message: "hello",
        },
        methods:{
                currentime:function (){
                    return Date.now();//返回一个时间戳
                }
            },
        computed:{
            currentime2:function (){
                return Date.now();//返回一个时间戳
            }

        }
    })
</script>

7.插槽slot（难点）

布局控制

类似于父子组件模板套模板。预留占位标签。

8.自定义事件与内容分发

从其他组件，操作vue对象中的属性

前端通过v-bind 绑定组件方法，然后通过v-on用Vue实例中的方法

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jvjaH6XY-1629802770388)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210730185432459.png)]$

基础语法

条件判断

网络通信：axios

组件界面布局

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r0AOkkSF-1629802770403)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210730190600271.png)]$

9.第一个 vue-cli项目

vue-cli是vue的官方脚手架，快速生成vue项目模板

对脚手架的理解 https://www.cnblogs.com/webXiaoAYang/p/10621223.html

(2条消息) Vue学习之路3-浅析Vue-cli搭建项目后的目录结构_小子pk了的博客-CSDN博客_vue-cli3目录结构

App.vue是一个组件，index.html是项目的页面，main.js是项目的入口文件，我们可以理解成index.html通过main.js将App.vue组件中的内容替换掉了index.html中的内容，看图说话；
main.js中引入了App.vue，并且new Vue()了一次，我们可以把main.js理解成是index.html页面中的js文件，此时new Vue()中的el绑定的则是index.html中的#app，所以这个new Vue()是对index.html页面的实例，接着在实例中注册了App.vue组件，通过template挂载到了index.html中的#app里，完全覆盖掉了index.html中的内容，大家可以改变App.vue中的#app试试，运行页面后看到的就是App.vue中的id；

9.1、功能：

统一目录结构

本地调试

热部署

单元测试

集成打包环境

9.2、环境配置

Node.js

下载 | Node.js 中文网 (nodejs.cn)

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8R35fmFa-1629802770408)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210731132050793.png)]$

检验安装是否成功

安装之后自带npm，npm就是一个软件管理工具

npm需要加速：选择淘宝的cnpm

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

安装 vue-cli

cnpm install vue-cli -g

C:\WINDOWS\system32>vue list

Available official templates:

★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
★ browserify-simple - A simple Browserify + vueify setup for quick prototyping.
★ pwa - PWA template for vue-cli based on the webpack template
★ simple - The simplest possible Vue setup in a single HTML file
★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

初始化：

新建一个文件夹，进入文件夹目录cmd命令初始化vue-cli

C:\Users\86137\Desktop\JAVA\vue\student>vue init webpack student

? Project name student
? Project description A Vue.js project
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) no

   vue-cli · Generated "student".

To get started:

  cd student
  npm install (or if using yarn: yarn)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

npm install 安装依赖环境

然后再进入此文件，cmd命令行下 npm install 安装依赖环境

npm run dev

npm run dev 打包，启动项目

vue-cli的框架结构：

index.html

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

src文件下再写一个App.vue

其他组件import到App.vue

通过标签 rount-link 绑定路由，实现界面跳转

package.json，打包参数设置

9.3、 webpack学习使用

cnpm install webpack -g

cnpm install webpack-cli -g

检验：

C:\WINDOWS\system32>webpack -v
webpack 5.47.1
webpack-cli 4.7.2

package.json里可以看webpack版本

写很多的js文件，和方法，最后打包成一个js

//导出一个方法
exports.sayHello= function (){
    document.write("<h1>孙晋开</h1>")
}

//导入方法
var hello = require("./hello");
hello.sayHello();

module.exports={
    mode: 'production',
    entry:'./modules/main.js',//打包main.js
    output:{
        filename:"./js/bound.js"//打包到bound.js
    }
};

上面是webpack.config.js的配置，前端所以js文件可以打包在一起，然后主页面只需要

<script src="dist/js/bound.js"></script>

前端模块化开发

9.4、vue-router

功能：控制页面跳转的

安装：npm install vue-router --save -dev

在route文件夹下：写路由配置的js

import Vue from 'vue'
import router from 'vue-router'
import content from "../components/content";
import main from "../components/main";
//安装路由
Vue.use(router);

export default new router({
  routes:[{
  // 路由路径
    path:'/content',
  //  跳转的组件
    component:content
  },
    {
      // 路由路径
      path:'/main',
      //  跳转的组件
      component:main
    }
  ]
});

主页面这样使用：

<div id="app">
  <router-link to="/main">首页</router-link>
  <router-link to="/content">内容页</router-link>
    <!--    页面展示-->
  <router-view></router-view>
</div>

两个vue组件是这样写的：

<template>
  <h1>内容页</h1>
</template>

<script>
export default {
  name: "content"
}
</script>
<!--scope作用域-->
<style scoped>

</style>

<template>
<h1>首页</h1>
</template>

<script>
export default {
  name: "main"
}
</script>

<style scoped>

</style>

9.5 、vue+element

安装

npm i element-ui -S

1.创建工程：

vue init webpack xxxx

2.进入工程：

cd xxx

3.安装vue-route：

npm install vue-router --save-dev

4.安装 element-ui

npm i element-ui -s

5.安装依赖：

npm install

6.安装 sass加速器

cnpm install sass-loader node-sass --save-dev

7.启动测试

npm run dev

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QErxnFru-1629802896930)(C:\Users\86137\AppData\Roaming\Typora\typora-user-images\image-20210801103959088.png)]$

坑：webpack版本不要用4，用3

"sass-loader": "^7.3.1",
//webpack降版本
"webpack": "^3.6.0",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-server": "^2.9.1",
    "webpack-merge": "^4.1.0"
    //sass降版本
    "sass-loader": "^7.0.3",
    "node-sass": "^4.7.2",

10.vue和ssm整合

VUE+SSM 以VUE做项目前端，SSM做后端框架，难点在于数据的传输处理，下面我记录一下一个简单的登录退出功能的实现，如果有缺陷还请大佬指出，个人菜鸟一个，正在学习当中，以此记录一下自己的学习_白百柏在帝都-CSDN博客

java SSM和vue整合_facePlus的博客-CSDN博客_vue与ssm框架结合

SSM项目怎么与vue结合_ssdssa的博客-CSDN博客

整合ssm使用Vue实现前后端数据交互（详细版）_xiaojiejie01的博客-CSDN博客

ssm vue架构图_ssm+vue前后端分离框架整合实现(附源码)_非著名程序员m~~的博客-CSDN博客

10.1跨域问题

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。
所谓同源是指，域名，协议，端口均相同，不明白没关系，举个栗子：

http://www.123.com/index.html 调用 http://www.123.com/server.php （非跨域）
http://www.123.com/index.html 调用 http://www.456.com/server.php （主域名不同:123/456，跨域）
http://abc.123.com/index.html 调用 http://def.123.com/server.php （子域名不同:abc/def，跨域）
http://www.123.com:8080/index.html 调用 http://www.123.com:8081/server.php （端口不同:8080/8081，跨域）
http://www.123.com/index.html 调用 https://www.123.com/server.php （协议不同:http/https，跨域）
请注意：localhost和127.0.0.1虽然都指向本机，但也属于跨域。
浏览器执行javascript脚本时，会检查这个脚本属于哪个页面，如果不是同源页面，就不会被执行。

10.2 npm run build打包配置

npm run build 打包项目，图片等资源使用相对路径会出现路径错误的问题

在build下的utils.js中，3使用 ‘vue-style-loader’ 依赖的地方添加 publicPath: ‘…/…/’ ，如图：

此时直接打包部署后会出现静态文件找不到的404错误，需要在config目录下的index.js文件里面将打包的assetsPublicPath改成’./'当前目录，如果UI框架的资源也加载不出来，也是这样做
在这里插入图片描述

玛莱之盾

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue/Vue-cli入门教程

Vuevue也是看狂神的讲的一般但是时长短，很多都没讲，vue重点是vue-cli脚手架的使用。建议b站找黑马程序员或者尚硅谷，讲的比较全。MVVM模式vue重要性：完全解耦了View层和Model层，这个解耦是至关重要的，是前后端分离的重要一环。1.第一个Vue程序IDEA插件：vue，下载不了的要去官网下载到本地，然后导入zip，注意选择对应版本https://plugins.jetbrains.com/plugin/9442-vue-js/versions/stable/108320导包
复制链接

扫一扫