• Vue——引入Vue的方法、VM对象和基础指令（面试）

    目录

    一、怎么引入vue到项目中使用

    1）第一类引入方式

    1.下载到本地，然后引入

    2.自己引入CDN

    3.自己把vue.js文件放在项目文件夹中引入项目 然后webpack打包

    4.编辑器直接生成cdn的方式

    2） 第二类引入方式

    1. 自己构建vue的脚手架(面试):    用npm下载vue 引入到项目中 然后webpack打包

    2.使用官方脚手架的方式来构建项目环境(面试)

    3.可视化项目管理方式(面试)

    4.编辑器直接生成脚手架环境的方式 (做项目推荐)

    二、VM对象和基础指令（面试）

    1.普通插值表达式插入数据:

    2.文本指令:(面试)

    3.考点:如何解决vue第一次加载的时候 页面上使用的数据会闪烁?(面试)

    4.给元素绑定属性

    6.v-once ：

     7、面试题/笔试题：Vue中有哪些常用的指令（12分）

    一、怎么引入vue到项目中使用

    vue就是个很多js工具代码的js文件
    因此可以直接引入到html文件中:两类方式

    1）第一类引入方式

    就是直接把vue的js代码库运行到html环境中

    1.下载到本地，然后引入

    1.     
    2.     <div id="app">{{msg}}div>
    3.     <script>
    4.         new Vue({
    5.             el: "#app",
    6.             data: {
    7.                 msg: "hello"
    8.             }
    9.         })
    10.     script>

    2.自己引入CDN

    1.     
    2.     <div id="app">{{msg}}div>
    3.     <script>
    4.         new Vue({
    5.             el: "#app",
    6.             data: {
    7.                 msg: "hello"
    8.             }
    9.         })
    10.     script>

    3.自己把vue.js文件放在项目文件夹中引入项目 然后webpack打包

    index.html

    1. 	
    2. 		<div class="box">
    3. 			{{msg}}
    4. 		div>
    5. 		
    6.

    main.js

    1. import Vue from "./vue2.6.14.js"
    2. new Vue({
    3. 	el:".box",
    4. 	data:{msg:"hqyj6666"}
    5. })

    webpack.config.js

    1. const MiniCssExtractPlugin = require("mini-css-extract-plugin")
    2. const HtmlWebpackPlugin = require('html-webpack-plugin');
    3. module.exports = {
    4. 	entry: __dirname + "/src/main.js", //默认是__dirname+"/src/index.js"		
    5. 	output: {
    6. 		asyncChunks: true, //创建按需加载的异步 chunk。
    7. 		path: __dirname + "/dist", //输出的目录,绝对路径,默认dist
    8. 		filename: '[name]-hqyj2-[id]bundle[hash:6].js', //输出的文件名,[hash:5]为5位哈希值,[id]为打包的chunk的id,[name]为入口的属性名,缺省则为mian,这几个一定记住 vue和react的css作用域-就是这个几个设计的
    9. 		library: {
    10. 			name: 'MyLibrary', //库名
    11. 			type: 'assign', //配置将库暴露的方式。('var'、'module'、'assign'、'assign-properties'、'this'、'window'、'self'、'global'、'commonjs'、'commonjs2'、'commonjs-module'、'commonjs-static'、'amd'、'amd-require'、'umd'、'umd2'、'jsonp' 以及 'system')
    12. 		},
    13. 		auxiliaryComment: {
    14. 			root: 'Root Comment',
    15. 			commonjs: 'CommonJS Comment',
    16. 			commonjs2: 'CommonJS2 Comment',
    17. 			amd: 'AMD Comment',
    18. 		},
    19. 		clean: true, // 在生成文件之前清空 output 目录
    20. 	},
    21. 	module: {
    22. 		rules: [
    23. 			{
    24. 				test: /\.css$/,
    25. 				use: [MiniCssExtractPlugin.loader, "css-loader"]
    26. 			},
    27. 			{
    28. 				test: /\.(png|jpg|jpeg|mp4|mp3)$/,
    29. 				use: ["file-loader"]
    30. 			},
    31. 			{
    32. 				test: /\.ts$/,
    33. 				use: "ts-loader"
    34. 			},
    35. 			{
    36. 				test: /\.js$/,
    37. 				exclude: /(node_modules|bower_components)/,
    38. 				use: {
    39. 					loader: 'babel-loader',
    40. 					options: {
    41. 						presets: ['@babel/preset-env'],
    42. 						plugins: ['@babel/plugin-proposal-object-rest-spread']
    43. 					}
    44. 				}
    45. 			},
    46. 			{ test: /\.s[a,c]ss$/, use: ["style-loader", "css-loader", "sass-loader"] }
    47. 		]
    48. 	},
    49. 	plugins: [
    50. 		new MiniCssExtractPlugin({
    51. 			filename: 'index.css' //css生成到css文件中,项目中手动以形式引入使用
    52. 		}),
    53. 		new HtmlWebpackPlugin({
    54. 			title: "hqyj-app", //html的标题默认为"Webpack App",
    55. 			filename: "index.html", //模板html打包后生成的文件名,放在output.path里面,默认"index.html"
    56. 			template: __dirname + "/public/index.html", //模板html文件的路径,
    57. 			inject: "body", //'head' || 'body' 打包后的bundle挂载到模板html的位置:'body' 放置在body元素的底部。'head'将把脚本放在head元素中。,
    58. 			publicPath: "./", //The publicPath used for script and link tags,
    59. 			minify: {
    60. 				collapseWhitespace: false, //是否压缩HTML:空格回车
    61. 				keepClosingSlash: true,//在单元素上保留末尾的斜杠
    62. 				removeComments: false, //是否清除HTML注释  
    63. 				removeRedundantAttributes: true,
    64. 				removeScriptTypeAttributes: true, //是否删除script的type属性(这个属性对于现代浏览器没啥用)
    65. 				removeStyleLinkTypeAttributes: true, //是否删除< style>和< link>的type="text/css"  
    66. 				minifyJS: false, //是否压缩页内JS  ,
    67. 				minifyCSS: true //是否压缩页内CSS  
    68. 			},
    69. 			cache: true,//仅当文件被更改时才重新打包,否则使用上一次打包时缓存起来的,默认true
    70. 		})
    71. 	],
    72. 	mode: "none",
    73. 	devServer: {
    74. 		open: true, //cli中 webpack serve --open					
    75. 		port: 8080,
    76. 		hot: true,
    77. 		host: '192.168.1.10',
    78. 		compress: true,
    79. 		proxy: {
    80. 			'/api': 'http://localhost:7001',
    81. 		},
    82. 	}
    83. }
    84.  
    85.

    4.编辑器直接生成cdn的方式

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

    点击创建后，会自动生成几个文件 css、img、js、index.html

    index.html:  (默认会写上以下代码)

    1. 		
    2. 		<div id="app">
    3. 			{{ counter }}
    4. 		div>
    5. 		<script>
    6. 			const App = {
    7. 				data() {
    8. 					return {
    9. 						counter: 100
    10. 					}
    11. 				}
    12. 			};
    13. 			Vue.createApp(App).mount('#app');
    14. 		script>

    2） 第二类引入方式

    就是直接把vue的代码环境集成了 然后开始在vue的代码环境中写项目,最终才经过webpack打包生成第一类方式

    1. 自己构建vue的脚手架(面试): 
       用npm下载vue 引入到项目中 然后webpack打包

    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 

    1. //4.webpack.config.js配置:
    2. const path = require('path');
    3. const {
    4. 	VueLoaderPlugin
    5. } = require('vue-loader');
    6. const HtmlWebpackPlugin = require('html-webpack-plugin');
    7. module.exports = {
    8. 	mode: 'production',
    9. 	watch: true,
    10. 	entry: './src/main.js',
    11. 	output: {
    12. 		filename: '[name].js',
    13. 		path: path.resolve(__dirname, 'dist'),
    14. 	},
    15. 	module: {
    16. 		rules: [{
    17. 			test: /\.vue$/,
    18. 			loader: 'vue-loader',
    19. 		}, ]
    20. 	},
    21. 	plugins: [
    22. 		new HtmlWebpackPlugin({
    23. 			template: path.join(__dirname, 'public/index.html'),
    24. 			filename: 'index.html',
    25.             inject:"body"
    26. 		}),
    27. 		new VueLoaderPlugin(),
    28. 	],
    29. 	devServer: {
    30. 		open: true,
    31. 		port: 8080,
    32. 		hot: true,
    33. 		host: '192.168.2.60',   //改为自己的ip
    34. 		compress: true,
    35. 	},
    36. }
    37.  
    38. //5.项目配置文件 pakage.json文件中:
    39. //scripts:{
    40. //"dev": "webpack serve --config webpack.config.js"
    41. //}
    42.  
    43. //6.main.js文件:
    44. import { createApp } from 'vue'
    45. import App from './App.vue'
    46. import {createApp} from 'vue'
    47. createApp(App).mount('#app')
    48. document.body.innerHTML+="444"
    49.  
    50. //7.模板html文件中
    52. 	<div id="app">div>
    54.  
    55. //8. box.vue 文件中：
    56. <template>
    57. 	<div>
    58. 		{{msg}}
    59. 	div>
    60. template>
    61. <script>
    62. 	export default {
    63. 		data(){
    64. 			return {msg:"hello  vue  文件 写出来的页面"}
    65. 		}
    66. 	}
    67. script>
    68. <style>
    69. style>
    70.

    注意：webpack.config.js里面的 plugins下的inject：“body”  ，不要写head，不然会发生div都还没定义

    然后就可以启动了:npm run dev  或者npm run serve ( "serve": "webpack server --config webpack.config.js"看自己怎么定义的)

    但是  修改了之后 会等很久才刷新  因为没有配置优化 所以很卡  官方的脚手架配置的特别好  就反应很快

    2.使用官方脚手架的方式来构建项目环境(面试)

    1.  npm install  @vue/cli -g            //下载官方脚手架 到全局，集成webpack的环境，能生成webpack的这个软件就是脚手架 （cli一般指的是自动化）

    （vue -V ==>查看脚手架的版本）


    2.  vue create app1  //项目名称
    3. 接下来让你选择一些默认要生成的工具,不管直接回车

    会选择插件，比如：([Vue 2]babel、eslint) 、 ([Vue 3]babel、eslint)

    以及选择一些配置


    4. 进入项目文件夹: cd app1 //进入项目文件夹,也可以直接在项目文件夹中打开终端
    5. 启动:
    npm run serve  //生成的打包文件在内存中不会写入磁盘用于开发阶段
    或者  
    npm run build //生成的打包文件在dist中 用于项目上线

    注意：不要有中文路径

    3.可视化项目管理方式(面试)

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

    index.html

    1. html>
    2. <html lang="">
    3.   <head>
    4.     <meta charset="utf-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width,initial-scale=1.0">
    7.     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    8.     <title><%= htmlWebpackPlugin.options.title %>title>
    9.   head>
    10.   <body>
    11.     <noscript>
    12.       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.strong>
    13.     noscript>
    14.     <div id="app">div>
    15.     
    16.   body>
    17. html>

    App.vue