2024年最全Vue基础精讲 —— 详解Vue实例、Vue实例的属性和方法，JavaScript逻辑运算符与赋值运算符

最后

由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

=============

在 build文件夹 下新建 webpack.config.practice.js 配置文件，内容参考：

const path = require(‘path’)

const HTMLPlugin = require(‘html-webpack-plugin’)

const webpack = require(‘webpack’)

const merge = require(‘webpack-merge’) // 合并对象

const baseConfig = require(‘./webpack.config.base’) // 基础配置

const defaultPlugins= [

new webpack.DefinePlugin({

‘process.env’: {

NODE_ENV: ‘“development”’

}

}),

new HTMLPlugin()

]

const devServer = {

port: 8080,

host: ‘0.0.0.0’,

overlay: {

errors: true,

},

hot: true

}

let config

config = merge(baseConfig, {

entry: path.join(__dirname, ‘…/practice/index.js’), // 入口文件

devtool: ‘#cheap-module-eval-source-map’,

module:{

rules:[

{

test: /.styl/,

use: [

‘vue-style-loader’,

‘css-loader’,

{

loader: ‘postcss-loader’,

options: {

sourceMap: true,

}

},

‘stylus-loader’

]

}

]

},

devServer,

resolve:{

alias:{

‘vue’: path.join(__dirname, ‘…/node_modules/vue/dist/vue.esm.js’)

}

},

plugins: defaultPlugins.concat([

new webpack.HotModuleReplacementPlugin(),

new webpack.NoEmitOnErrorsPlugin()

])

})

module.exports = config

注意：需要设置 alias 中 vue 指向，这里需要注意不同vue.js 的区别

‘vue’: path.join(__dirname, ‘…/node_modules/vue/dist/vue.esm.js’)

在 node_modules/vue/dist/ 下有不同的vue.js，若不指定vue.js，项目默认使用的是.vue.runtime.esm.js（vue打包之后的代码），这份vue.js是不支持在Vue对象中使用template的。

若不设置alias指向，项目报错如图：

[Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

在package.json文件中新建一条启动命令

“practice”: “cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.practice.js”

Vue实例 —— 创建，template创建Vue实例

===========================

通过template创建Vue实例，这种方式Vue会将template编译成一个render function，render function返回真正要显示在页面上的HTML代码，效率稍低。

代码示例：

import Vue from ‘vue’

const div = document.createElement(‘div’)

document.body.appendChild(div)

new Vue({

el: div,

template: ‘

this is content {{text}}

’,

data: {

text: ‘text’

}

})

运行结果：

将template的内容挂载到div元素上，挂载过程是会把整个节点替换掉，因此在网页上看不到#root的元素

先定义document节点，再append到body中的方式，相对麻烦

可以注意到先加载了js，再加载真正的页面元素，比较奇怪

在真实的生产环境中，不建议这么操作，建议新建一个template.html文件，类似这样：

修改 webpack.config.practice.js 配置文件，生成HTML文件时会根据 template.html为模板生成

const defaultPlugins= [

new webpack.DefinePlugin({

‘process.env’: {

NODE_ENV: ‘“development”’

}

}),

new HTMLPlugin({

template: path.join(__dirname, ‘template.html’)

})

]

有了这个template模板文件之后， 修改el值

import Vue from ‘vue’

分享

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

有了这个template模板文件之后， 修改el值

import Vue from ‘vue’

分享

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】