文末
技术是没有终点的,也是学不完的,最重要的是活着、不秃。
零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。
最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
自学最怕的就是缺乏自驱力,一定要自律,杜绝“三天打鱼两天晒网”,到最后白忙活一场。
高度自律的同时,要保持耐心,不抛弃不放弃,切勿自怨自艾,每天给自己一点点鼓励,学习的劲头就会很足,不容易犯困。
技术学到手后,找工作的时候一定要好好准备一份简历,不要无头苍蝇一样去海投简历,容易“竹篮打水一场空”。好好的准备一下简历,毕竟是找工作的敲门砖。
拿到面试邀请后,在面试的过程中一定要大大方方,尽力把自己学到的知识舒适地表达出来,不要因为是自学就不够自信,给面试官一个好的印象,面试成功的几率就会大很多,加油吧,骚年!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
🏆姐妹进阶篇,Java基础教程(进阶篇),包含Java高并发、Spring、MySQL等Java进阶技术栈。
🏆全部订阅,可加入Java学习星球,完成Java从入门、实战、进阶全方位的Java知识体系学习。
目录
1、如果你只是简单写几个Vue的Demo程序,那么你不需要VueCLI脚手架。
2、如果你在开发大型项目,那么你需要,并且必然需要使用VueCLI。
三、runtime-compiler和runtime-only的区别
2、runtime-only加载过程:(性能更高,代码更少)
1、vue-cli 3 与 vue-cli 2 版本的区别?
一、什么是VueCLI
1、如果你只是简单写几个Vue的Demo程序,那么你不需要VueCLI脚手架。
2、如果你在开发大型项目,那么你需要,并且必然需要使用VueCLI。
- 使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
- 如果每个项目都要手动完成这些工作,那么无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。
3、CLI是什么意思?
- CLI是Commond-Line Interface,翻译为命令行界面,俗称脚手架。
- VueCLI是一个官方发布vue.js项目脚手架。
- 使用VueCLI可以快速搭建vue开发环境以及对应的webpack配置。
4、脚手架长什么样?
5、脚手架依赖于node.js和webpack
二、安装Vue CLI脚手架
//默认安装脚手架3
npm install -g @vue/cli
//安装脚手架2
npm install -g @vue/cli-init
//脚手架2创建项目
vue init webpack my-project
//脚手架3创建项目
vue create my-project
三、runtime-compiler和runtime-only的区别
1、runtime-compiler加载过程
template -> ast -> render -> vdom -> UI
2、runtime-only加载过程:(性能更高,代码更少)
render -> vdom -> UI
3、小结
如果在之后的开发中,你依然使用template,就需要选择Runtime-Compiler;
如果你之后的开发中,使用的是.vue文件夹开发,那么可以选择Runtime-only;
4、代码实例
main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
// const cpn = {
// template: '<div>{{message}}</div>',
// data() {
// return {
// message: '我是组件message'
// }
// }
// }
new Vue({
el: '#app',
render: function (createElement) {
// 1.普通用法: createElement('标签', {标签的属性}, [''])
// return createElement('h2',
// {class: 'box'},
// ['Hello World', createElement('button', ['按钮'])])
// 2.传入组件对象:
return createElement(App)
}
})
App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>runtimecompiler</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
5、npm run build执行过程
6、npm run dev执行过程
四、认识Vue CLI3
1、vue-cli 3 与 vue-cli 2 版本的区别?
- vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3
- vue-cli 3 的设计原则是“0配置”,移除的配置文件根目录下的,build和config等目录
- vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化
- 移除了static文件夹,新增了public文件夹,并且index.html移动到public中
2、通过脚手架3构建项目
vue create my-project
运行项目
npm run serve
注意:
之前学习的时候main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
el: '#app',
render: h => h(App)
})
通过 Vue CLI3创建的项目main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App)
}).$mount('#app')
两种写法没区别。
el多了一个判断,el被解析为$mount。
五、箭头函数
1、定义函数的三种方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 箭头函数: 也是一种定义函数的方式
// 1.定义函数的方式: function
const aaa = function () {
}
// 2.对象字面量中定义函数
const obj = {
bbb() {
}
}
// 3.ES6中的箭头函数
// const ccc = (参数列表) => {
//
// }
const ccc = () => {
}
</script>
</body>
</html>
2、箭头函数参数和返回值
<!DOCTYPE html>
### 结尾
正式学习前端大概 3 年多了,很早就想整理这个书单了,因为常常会有朋友问,前端该如何学习,学习前端该看哪些书,我就讲讲我学习的道路中看的一些书,虽然整理的书不多,但是每一本都是那种看一本就秒不绝口的感觉。
以下大部分是我看过的,或者说身边的人推荐的书籍,每一本我都有些相关的推荐语,如果你有看到更好的书欢迎推荐呀。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
![前端学习书籍导图-1](https://img-blog.csdnimg.cn/img_convert/3e94a021bace3983a606999eae684f9e.webp?x-oss-process=image/format,png)
}
const ccc = () => {
}
</script>
</body>
</html>
2、箭头函数参数和返回值
<!DOCTYPE html>
### 结尾
正式学习前端大概 3 年多了,很早就想整理这个书单了,因为常常会有朋友问,前端该如何学习,学习前端该看哪些书,我就讲讲我学习的道路中看的一些书,虽然整理的书不多,但是每一本都是那种看一本就秒不绝口的感觉。
以下大部分是我看过的,或者说身边的人推荐的书籍,每一本我都有些相关的推荐语,如果你有看到更好的书欢迎推荐呀。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
[外链图片转存中...(img-IiBRDdC2-1715836248921)]