Vue2.0简介

小狐狸ya

已于 2022-09-20 12:43:40 修改

阅读量1.3k

点赞数 1

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

于 2022-09-20 12:43:18 首次发布

本文链接：https://blog.csdn.net/qq_56607109/article/details/126950901

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Vue2.0简介

2014年2月，尤雨溪开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的框架，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。

Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。
Vue.js是前端的主流框架之一，和Angular.js、React.js并称为前端三大主流框架。
Vue.js是前端的主流框架之一，和Angular.js、React.js并称为前端三大主流框架。
数据驱动
vue.js 数据驱动和组件化开发，轻量级一些，分层渐进式框架；spa
React.js 数据驱动和组件化开发，灵活性很高，需要什么都得自己构建逻辑自己写;app
Angular.js 数据驱动 1.0 ，加上了组件化开发2.0，重量级框架;大型企业OA办公
Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

1、vue引入到项目中的八种方式

第一类引入方式：把vue.js引入到网页中

1、本地引入：现在官网下载vue.js 放在项目文件中。然后引入到html中。

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

</head>
<body>
    <body>
        <div id="app"></div>
        <body>
            <div class="box">
                {{msg}}
            </div>
    <script type="module">
        var vm=new Vue({
    el: ".box",
    data: {
        msg: "hello",
        age: "18"
    }
    })
    </script>
</body>

2、CDN引入:与第一种使用方法差不多，只是引入vue.js文件，不下载到本地，而是直接复制网络地址。

    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>

3、webpack打包：

在package.json里面配置命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
	"serve":"webpack server --config webpack.config.js",
	"build":"webpack"
  },

main.js

import Vue from "./vue2.6.14.js"
new Vue({
	el:".box",
	data:{msg:"cq6666"}
})

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	
		<div class="box">
			{{msg}}
		</div>
	</body>
</html>

最后启动：npm run serve

4、编辑器生成（Hbuilder中）

新建项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JSwN449a-1663648874897)(./image/image-20220829191926489.png)]

2、普通项目–>vue

在这里插入图片描述

创建之后默认下载

在这里插入图片描述

第二类引入：需要加载器转码再引入到网页中

5、自己打包配置加载器

/*
1.新建项目  alipay 
2.初始化配置文件:npm init -y
3.下载依赖:
 npm i webpack@5.74.0 webpack-cli@4.10.0 vue-loader@17.0.0 @vue/compiler-sfc@3.2.37 webpack-dev-server@4.10.0  html-webpack-plugin@5.5.0 -D
npm i vue -S 
4.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, 'src/index.html'),
			filename: 'index.html'
		}),
		new VueLoaderPlugin(),
	],
	devServer: {
		open: true,
		port: 8080,
		hot: true,
		host: '192.168.2.60',
		compress: true,
	},
}

//5.项目配置文件 pakage.json文件中:
//scripts:{
//"dev": "webpack serve --config webpack.config.js"
//}

//6.main.js文件:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
document.body.innerHTML+="444"

//7.模板html文件中
<body>
	<div id="app"></div>
<body>
    
//然后就可以启动了:npm run dev  但是 但是 但是  修改了之后 会等很久才刷新  因为没有配置优化 所以很卡  官方的脚手架配置的特别好  就反应很快

6.使用官方脚手架的方式来构建项目环境（重点）

1.  cnpm install  @vue/cli -g //下载官方脚手架
2.  vue create app1  //项目名称
3. 接下来让你选择一些默认要生成的工具,不管直接回车
4. 进入项目文件夹: cd app1 //进入项目文件夹,也可以直接在项目文件夹中打开终端
5. 启动:
npm run serve  //生成的打包文件在内存中不会写入磁盘用于开发阶段
或者  
npm run build //生成的打包文件在dist中 用于项目上线

7、可视化项目管理方式(面试)

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

在这里插入图片描述

8、编辑器直接生成脚手架环境的方式

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

2、依赖项中的符号说明：

~7.8.3 下载最新版 最新版为10.6.3 就下它
^7.4.17 下载当前7.最新版
npm i 模块默认最新版
npm i 模块@2.6.14 下载指定版本

小狐狸ya

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue2.0简介

2014年2月，尤雨溪开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的框架，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。Vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue.js是前端的主流框架之一，和Angular.js、React.js并称为前端三大主流框架。Vue.js是前端的主流框架之一，和Angular.js、React.js并称为前端三大主流框架。数据驱动。
复制链接

扫一扫