vue框架引入方式

最新推荐文章于 2024-07-25 09:35:22 发布
最新推荐文章于 2024-07-25 09:35:22 发布
阅读量640 收藏
点赞数
分类专栏： Vue框架 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cjx177187/article/details/126796790
版权

第一类（需要加载器转码在引入到页面中）：

引入自己的vue.js

  • 将官网的vue.js下载到自己文件的目录中，利用scr引入js文件

    <script src="./myvue.js"></script>

</head>

<body>

    <div class="box">

        {{msg}}

    </div>

    <script>

        new Vue({

            el:".box",

            data:{

                msg:"hello222"

            }

        })

    </script>

   

</body>

引入CDN

  • 官网复制vue.js文件网址，利用scr引入js文件

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

</head>

<body>

    <div class="box">

        {{msg}}

    </div>

    <script>

        new Vue({

            el:".box",

            data:{

                msg:"hello"

            }

        })

    </script>

   

</body>

编辑器生成CDN

  • HbuilderX 创建项目 选择 vue项目普通模式

wedpack打包

第二类（把vue.js引入到网页上）：

官方脚手架-ui

  • 1.  cnpm install  @vue/cli -g
  • 2.  vue ui
  • 3. 打开的界面 中
  • 4.创建项目==>填写项目名字,选择项目创建的目录 点击创建
  • 5.等待它下载所有配置文件完毕 
  • 6.任务中serve启动以后想当与启动了热更新服务器:默认localhost:8080(也可以点启动app直接帮我们打开localhost:8080)
  • 7.如果把项目做完以后要上线,就启用build相当于webpack的打包,生成dist文件,注意:打包的路径是相对路径要改一下配置中的公共路径为:  ./ 然后点保存修改 

官方脚手架（重点）

  • 1.  cnpm install  @vue/cli -g //下载官方脚手架
  • 2.  vue create app1  //项目名称
  • 3. 接下来让你选择一些默认要生成的工具,不管直接回车
  • 4. 进入项目文件夹: cd app1 //进入项目文件夹,也可以直接在项目文件夹中打开终端
  • 5. 启动:

npm run serve  //生成的打包文件在内存中不会写入磁盘用于开发阶段

或者 

npm run build //生成的打包文件在dist中 用于项目上线

利用编辑器

  • HbuilderX 创建项目
  • 选择 vue项目 vue-cli默认模板
  • 然后要:npm i
  • 再:npm run serve

自己打包配置加载器

  • 用npm下载vue 引入到项目中 然后webpack打包

webpack.config.js文件

const path = require('path');

const {

    VueLoaderPlugin

} = require('vue-loader');

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {

    mode: 'production',

    watch: true,

    entry: './src/main.js',

    output: {

        filename: '[name].js',

        path: path.resolve(__dirname, 'dist'),

    },

    module: {

        rules: [{

            test: /\.vue$/,

            loader: 'vue-loader',

        }, ]

    },

    plugins: [

        new HtmlWebpackPlugin({

            template: path.join(__dirname, 'pubilc/index.html'),

            filename: 'index.html'

        }),

        new VueLoaderPlugin(),

    ],

    devServer: {

        open: true,

        port: 8000,

        hot: true,

        host: '192.168.0.104',

        compress: true,

    },

}

package.json文件

    "dev": "webpack serve --config webpack.config.js"

 

main.js文件

import { createApp } from 'vue'

import Box from './Box.vue'

createApp(Box).mount('.box')

 

Box.vue文件

<template>

    <div>

        {{msg}}

    </div>

</template>

<script>

    export default {

        data(){

            return {msg:"hello  vue  文件 写出来的页面"}

        }

    }

</script>

<style>

</style>

 

index.html文件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <div class="box"></div>

   

</body>

</html>

 

 

 

cjx177187
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue框架背后的故事
官方推荐
10-08 10万+
Vue作为当下主流的框架，让我们一起走进尤大大对Vue的构建历程吧
Vue框架安装入门
msmxsd的博客
04-14 2377
一、Vue.js入门 Vue.js是一款渐进式JavaScript框架。具有体积小、更高的运行效率（基于虚拟dom）、实现双向数据绑定、生态丰富、学习成本低等特点。 1.安装与部署 Vue.js的使用方法： 一、直接用<script>标签引入 下载vue.js将其放在项目内，用<script>标签将vue.js引入html的<head>标签内 或者是通过CDN的方式引入Vue.js。 二、使用命令行工具CLI搭建脚手架 ...
Vue框架引入Axios
程序员之道
12-27 952
首先已经创建好了 Vue 框架，安装好了 node.js。之后打开终端，使用命令。
vue的引入方式
joy_zhuo_的博客
08-31 8198
7.如果把项目做完以后要上线,就启用build相当于webpack的打包,生成dist文件,注意:打包的路径是相对路径要改一下配置中的公共路径为: ./ 然后点保存修改。1.自己构建vue的脚手架(面试): 用npm下载vue 引入到项目中 然后webpack打包。4. 进入项目文件夹: cd app1 //进入项目文件夹,也可以直接在项目文件夹中打开终端。npm run build //生成的打包文件在dist中 用于项目上线。4.创建项目==>填写项目名字,选择项目创建的目录 点击创建。...
Vue框架
热门推荐
记录学习历程
10-18 7万+
Vue 1、vue概述 Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如：vue-router：跳转，vue -resource：通信，vuex：管理)或既有项目整合 官网 1.1、前端三板斧 HTML (结构) ：超文本标记语言(Hyper Text Markup Language)，决定网页的结构和内容 CSS (表现)
Vue引入VantUI框架
A_man_of_ideas的博客
06-10 964
第三步：打开官网复制代码，粘贴到需要用组件的地方。在babel.config.js中配置。在/src/main.js中引入。第一步：安装vant-ui。第二步：引入vant-ui。
VUE框架
weixin_65015039的博客
03-12 5万+
1 概述 VUE是一款前端框架，免除了JavaScript中的DOM操作，简化书写 在JavaScript中有很多没有逻辑的繁琐的重复操作，如下 而VUE改善了这个问题，简化了DOM书写。 VUE是基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。之前的操作是将重点放在了DOM书写上。而要了解MVVM思想首先要了解MVC思想 C 就是咱们 js 代码，M 就是数据，而 V 是页面上展示的内容，如下图是我们之前写的代码，如下是我们之.
Vue框架简介
m0_47370714的博客
03-16 6199
Vue是一套用于构建用户界面的渐进式JavaScript框架。渐进式：Vue可以自底向上逐层应用。简单应用：只需一个轻量小巧的核心库复杂应用：可以引用各式各样的Vue插件。
如何在Vue中引入iconfont
weixin_46285310的博客
08-06 4209
首先在了解了Vue的基础上，知道和一般的html代码里引入的方式会有所不同，那么如何引入呢 第一步：首先在某图标库里搜索你想要的图标 第二步：点击图标添加到购物车里如下图所示 第三步：点击右上角购物车，会出现一个列表我们这里选择添加到项目，如果没有，则再右下角新增一个项目 第四步：点击之后会跳转到项目里如图，这里我们选择Font class 如有特殊需要，点击项目设置，设置一些选项，这里有一个前缀可以设置，避免与你的vue项目里的css或者命名参生冲突 第五步：...
Vue 3 框架
weixin_58448088的博客
10-29 2512
vue 3 中使用的是组合式API，组合式API的核心思想是直接在函数作用域内定义响应式状态变量，并将从多个函数中得到的状态组合起来处理复杂问题。这种形式更加自由，也需要你对vue的响应式系统有更深的理解才能高效使用。相应的，他的灵活性也使得组织和重用逻辑的模式更加强大。
Vue框架下引入ActiveX控件的问题解决
10-17
主要介绍了Vue框架下引入ActiveX控件的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue框架中正确引入JS库的方法介绍
01-21
本文主要给大家介绍的是关于在Vue框架中正确引入JS库的相关内容，分享出来供大家参考学习，下面话不多说，来一起看看详细的介绍： 错误示范 全局变量法 最不靠谱的方式就是将导入的库挂在全部变量window 对象下： ...
springboot+vue管理后台框架
04-13
标题 "springboot+vue管理后台框架" 涉及到的技术栈是Spring Boot与Vue.js，这是一种常见的前后端分离架构的实现方式。Spring Boot作为后端框架，提供数据处理、业务逻辑以及API接口，而Vue.js则作为前端框架，负责...
Vue框架笔记资源学习
01-04
要使用Vue框架，首先需要引入Vue.js文件。可以通过CDN方式引入，例如：<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">。然后，可以创建一个Vue实例，并将其与HTML元素绑定。 2.2 Vue框架的基本使用 ...
详解Vue中nextTick的原理与作用
fengjing81的专栏
07-24 671
Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。
兼容浏览器，切换PC端显示PC端，切换H5端显示H5端
L_C_sunny的博客
07-24 292
浏览器H5端 (在浏览器H5端，切换PC端兼容显示PC端页面)PC端 （在浏览器PC端，切换H5端兼容显示H5端页面）兼容浏览器，切换PC端显示PC端，切换H5端显示H5端。中获取是否是那个端的。
vue3 reactive原理（二）-代理Set和Map及ref原理
KEEP CODING
07-25 1216
Set和Map类型的数据也属于异质对象，它们有特定的属性和方法用来操作自身。因此创建代理时，针对特殊的方法需要特殊的对待。 Vue 的ref 是基于reactive函数实现的，它在其基础上，增加了基本类型的响应性、解决reactive在解构时丢失响应性的问题及在模版字面量中自动脱落Ref.
common-intellisense：助力TinyVue 组件书写体验更丝滑
OpenTiny的博客
07-24 1124
本文由体验技术团队Kagol原创~前两天，common-intellisense 开源项目的作者 Simon-He95 在 VueConf 2024 群里发了一个重磅消息：common-intellisense 支持 TinyVue 组件库啦！common-intellisense 插件能够提供超级强大的智能提示功能，包含属性(props)、事件(events)、插槽(slots)以及对应的注释和类型，实例上的方法(methods)等等，支持多个UI库，让你的开发效率更上一层楼。
vue中的nexttrick
最新发布
gt8011的博客
07-25 489
nextTick是 Vue 中一个强大的工具，它允许你在 DOM 更新完成后执行代码。正确使用nextTick可以避免很多常见的问题，但也要注意不要过度依赖它，以免影响应用的性能。如果你对nextTick有更深入的问题或需要示例代码，请随时提问。我会尽力提供帮助。
vue框架引入路由的步骤？
05-25
2. 引入 Vue Router：在项目入口文件中引入 Vue 和 Vue Router。 ```javascript import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); ``` 3. 定义路由：创建一个路由配置文件，定义...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值