feat: 更新前端进击文章内容

super456 · Apr 21, 2024 · 559e0f4 · 559e0f4
1 parent 51dca98
commit 559e0f4
Show file tree

Hide file tree

Showing 29 changed files with 1,052 additions and 0 deletions.
diff --git a/docs/.vitepress/sidebar/qianduanjinji.ts b/docs/.vitepress/sidebar/qianduanjinji.ts
@@ -59,6 +59,12 @@ export default function qianduanjinjiSidebarGuide() {
         { text: 'Vue2 基础知识易错点', link: '/frame/vue/basics-knowledge' },
         { text: 'Vue2 入门实战项目：快餐系统', link: '/frame/vue/newcomer-project' },
         { text: 'Vue-CLI2 跨域请求 Demo（fetch、axios、proxyTable）', link: '/frame/vue/cross-domain-request' },
+        { text: 'Vue-CLI2 中的 Vue-Router 和 Vue-Resource 实战', link: '/frame/vue/router-resource' },
+        { text: 'Vue-CLI2 中的 render: h => h(App) 解析', link: '/frame/vue/render-app' },
+        { text: 'Vue2 生命周期的理解与应用', link: '/frame/vue/vue2-life-cycle' },
+        { text: 'Vue2 基础知识点（一）', link: '/frame/vue/vue2-basics-knowledge' },
+        { text: 'Vue-CLI2 入门 Demo 游戏', link: '/frame/vue/newcomer-game' },
+        { text: 'Vue2 父子组件动态传值', link: '/frame/vue/vue2-component-props' },
       ],
     },
     {
@@ -136,6 +142,7 @@ export default function qianduanjinjiSidebarGuide() {
         { text: '开发常用命令行', link: '/other/toolGuide/common-command-line' },
         { text: '脚手架及 CLI 工具使用', link: '/other/toolGuide/scaffold-cli' },
         { text: 'Web 服务器 live-server 的安装及使用', link: '/other/toolGuide/live-server' },
+        { text: '常用的 Markdown 语法格式来编写文章', link: '/other/toolGuide/markdown' },
         // { text: 'VS Code 常用快捷键', link: '/other/toolGuide/' },
       ],
     },

diff --git a/docs/posts/growth-record/frame/vue/newcomer-game.md b/docs/posts/growth-record/frame/vue/newcomer-game.md
@@ -0,0 +1,24 @@
+---
+title: Vue-CLI2 入门 Demo 游戏
+date: 2018-07-05 20:01:01
+tag:
+ - Vue
+categories:
+ - 前端进击
+---
+# Vue-CLI2 入门 Demo 游戏
+
+**第一次使用vue-cli2.x搭建一个小demo游戏。代码文件有很多注释信息，通俗易懂的使用这个脚手架搭建一个入门小项目哈。**
+
+## 介绍使用
+- 使用默认创建的脚手架；
+- 修改App.vue、HelloWorld.vue文件，assets文件夹添加了两张图片；
+- 然后编译运行；
+
+## 运行截图
+<CustomImage src='/growth-record/frame/vue/game.gif' />
+
+## 参考文献
+- Web前端网站教程-米斯特吴
+
+源码在我的GitHub上：[点击跳转](https://github.com/super456/vue-cli2.x-demo)
diff --git a/docs/posts/growth-record/frame/vue/render-app.md b/docs/posts/growth-record/frame/vue/render-app.md
@@ -0,0 +1,86 @@
+---
+title: 'Vue-CLI2 中的 render: h => h(App) 解析'
+date: 2018-07-08 20:08:08
+tag:
+ - Vue
+categories:
+ - 前端进击
+---
+# Vue-CLI2 中的 render: h => h(App) 解析
+**对于这个，可能es6语法不熟的人很容易产生懵懂，因为我也不熟，所以记录一下，毕竟这也是个重要的知识点。**
+
+### （一）遇到的问题代码：
+```
+new Vue({
+  el: '#app',
+  router,//实例化，表示会使用
+  render: h => h(App)//vue2.0写法
+
+  //以下是vue1.0的写法
+  //components: { App },//注册组件信息
+ // template: '<App/>'//简写的模板调用组件的标签
+})
+
+```
+官方的解释很全面但是不是很容易理解：[createElement 参数](https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5-data-%E5%AF%B9%E8%B1%A1)
+
+### （二）代码分解
+将`render: h => h(App)` 根据es6语法分解为：
+
+ `render: h => h(App);`
+===
+等价于
+
+`render: h => {return h(App);}`
+===
+等价于
+
+` render: function(h) { return h(App);}`
+===
+等价于
+` render: function(createElement) { return createElement(App);  }`
+===
+
+### （三）解析一下这个vue2.0渲染过程：
+render函数用来渲染视图，也提供给`el`挂载，所以使用render函数就是为了页面显示出来。
+
+1.render 方法是一个函数，在接受传入的参数 h 函数后，返回 `h(App)` 的函数调用结果。
+
+2.在创建 vue 实例时，通过调用 render 方法来渲染实例页面的 DOM 结构。
+
+3.当vue 在调用 render 方法时，会传入一个 createElement 函数作为参数，h 的实参是 createElement 函数，然后 createElement 会以 `App`为参数进行调用。
+
+### （四）写一个createElement函数的demo
+创建一个组件，使用createElement函数调用
+```
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>createElement方法应用</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+</head>
+
+<body>
+    <p>下面会使用createElement方法创建DOM结点</p>
+    <div id="vue-app"></div>
+    <script type="text/javascript">
+        var app=Vue.component('app',{
+            template:'<h1>test</h1>'
+        })
+        new Vue({
+            el: '#vue-app',
+            render: function (createElement) {
+                // return createElement('h1', '一则头条');//这个方式也可以
+                return createElement(app);//使用调用组件
+            },
+
+        });
+    </script>
+</body>
+
+</html>
+```
+运行结果是：
+<CustomImage src='/growth-record/frame/vue/render-app.png' />
diff --git a/docs/posts/growth-record/frame/vue/router-resource.md b/docs/posts/growth-record/frame/vue/router-resource.md
@@ -0,0 +1,167 @@
+---
+title: Vue-CLI2 中的 Vue-Router 和 Vue-resource 实战
+date: 2018-07-09 20:04:01
+tag:
+ - Vue
+categories:
+ - 前端进击
+---
+# Vue-CLI2 中的 Vue-Router 和 Vue-Resource 实战
+**简单记录一下这两个插件的使用方法，写了一个demo，方便理解及应用。**
+### （一）安装vue-cli2.x脚手架
+如果还没安装的，或安装过程不熟的，可以参考这篇文章教程，写的很详细——[Vue2.0史上最全入坑教程（上）—— 搭建Vue脚手架（vue-cli）](https://www.jianshu.com/p/1626b8643676/)，这个文章作者真的很用心，向他学习。
+
+### （二）安装vue-router和vue-resource插件
+如果在安装脚手架的时候安装了vue-router，可以直接跳转到安装vue-resource。
+如果不是的，可以使用命令：`cd <项目文件夹>` 切换到项目文件夹路径下，然后使用命令行安装：`npm install vue-router --save` 和`npm install vue-resource --save`
+
+这里说明一下安装`npm install 插件 +[参数]`，表示的意思：
+1.使用：`npm install 插件`   ：会把这个插件安装到node_modules目录中，但不会修改package.json内容；
+
+2.`npm install 插件 --save`  ：在项目发布上线之后还会依赖用到的插件，没有这个插件，项目不能正常的运行，自动更改package.json内容  ；
+
+3.`npm install 插件 --save-dev `：把插件安装到开发依赖中，项目上线之后不会用到的插件，针对个别插件，比如说这个“babel-loader”，是在项目编译解析完成后发布就没用到了的，自动更改package.json内容；
+
+### （三）使用vue-router+vue-resource写一个跳转请求页面数据的demo
+1.先看一下安装脚手架的时候安装的路由界面及配置：
+<CustomImage src='/growth-record/frame/vue/router-01.png' />
+
+2.如果一开始没有的安装vue-router后自己手动安装的，可以参考这个main.js 和router文件夹的index.js配置的配置代码如下：
+main.js代码：
+```
+import Vue from 'vue'
+import App from './App'
+import router from './router'//引入路由指定文件
+
+Vue.config.productionTip = false
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  router,//实例化，表示会使用
+  render: h => h(App)//vue2.0写法
+
+  //以下是vue1.0的写法
+  //components: { App },//注册组件信息
+ // template: '<App/>'//简写的模板调用组件的标签
+})
+
+```
+如果对代码中的`render: h => h(App)//vue2.0写法` 不理解的可以查看我之前写的文章——[vue-cli2.x中的render: h => h(App)解析](https://blog.csdn.net/qq_35324453/article/details/80961128)
+
+router文件夹的index.js代码：
+```
+import Vue from 'vue'
+import Router from 'vue-router'//引入路由配置的模块
+import HelloWorld from '@/components/HelloWorld'//引入需要路由转址的路径
+import Home from '@/components/Home'//引入需要路由转址的路径
+import VueResource from 'vue-resource'//引入vue-resource插件http请求
+//下面这种方法引用也可以
+// import HelloWorld from '../components/HelloWorld'//引入需要路由转址的路径
+// import Home from '../components/Home'//引入需要路由转址的路径
+
+Vue.use(Router)//声明引用，全局使用
+Vue.use(VueResource)//声明引用，全局使用
+
+export default new Router({
+
+  // 注意当有多个路由的时候默认使用第一个路由地址
+  routes: [//注意routers是一个对象数组
+    {//需要跳转的组件需要import引进
+      path: '/',//路由的地址，此时表示根路径
+      name: 'HelloWorld',
+      component: HelloWorld
+    },
+    {//需要跳转的组件需要import引进
+      //路由的地址，此时表示根路径。注意第二个路由地址这里需要添加上组件名
+      path: '/Home',
+      name: 'Home',
+      component: Home
+    }
+  ],
+  mode:"history"//去掉url链接中的#符号
+})
+
+```
+3.添加一个组件Home.vue，添加位置如下：
+<CustomImage src='/growth-record/frame/vue/router-02.png' />
+
+组件代码为：
+```
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    test
+    <p>以下是获取http请求的数据内容</p>
+    <ul>
+        <li v-for="user in users">{{user.id}}. {{user.name}}</li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'home',
+  data () {
+    return {
+      users:[],
+      msg: 'hello Home'
+    //   使用网络接口
+    }
+  },
+  created(){
+    //   http请求,请求成功调用.then()函数，并将数据传给data
+      this.$http.get("http://jsonplaceholder.typicode.com/users").then((data)=>{
+        //   console.log(data);//请求成功的数据
+        this.users=data.body;//将data数据的的body内容复制给定义的users数据
+      })
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>
+
+```
+
+4.需要在根组件App.vue下添加一下引入组件的内容：
+```
+<template>
+  <div id="app">
+    <img src="./assets/logo.png">
+    <!--注意a标签会重新加载页面，相当于刷新页面-->
+    <ul>
+      <p>--注意a标签会重新加载页面，相当于刷新页面--</p>
+      <li><a href="/">HelloWorld</a></li>
+      <li><a href="/Home">Home</a></li>
+      <p>此处使用router-link，不会刷新页面，相当于局部刷新</p>
+      <li><router-link to="/">HelloWorld</router-link></li>
+      <li><router-link to="/Home">Home页面</router-link></li>
+    </ul>
+    <router-view/>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'App'
+}
+</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>
+
+```
+
+### （四）运行结果
+<CustomImage src='/growth-record/frame/vue/router-03.gif' />
diff --git a/docs/posts/growth-record/frame/vue/vue-question-summary.md b/docs/posts/growth-record/frame/vue/vue-question-summary.md
@@ -57,3 +57,37 @@ MDN 给出了以下答案
 2. 错误的发现 => 解决的时间是否过长，如何更好的面对线上问题；
 3. 权限的设计是否存在问题，目前的模式为没有权限 => 摧毁，采用有权限 => 生成是否会更加安全？
 4. 前端自身的告警系统很有必要；
+
+## 编译报错问题：You are using the runtime-only build of Vue where the template compiler is not available
+相信很多初学者使用vue-cli2.x初始化脚手架项目的时候或者webpack配置的时候会遇到这个问题：
+<CustomImage src='/growth-record/frame/vue/vue-question-06.png' />
+
+一开始初始化项目配置的时候，有两个运行环境配置的版本：Compiler版本、Runtime版本。
+
+简单说一下这两个版本的区别：
+
+1. 当对template模板内容编译是需要对字符串进行模板渲染或者可以绑定的html对象作为模板进行渲染的方式，就需要使用Compiler版本。示例如下：
+   ```
+	new Vue({
+	    el:'#vue-app',
+	    template:'<div><h1>{{test}}</h1></div>',
+	    data:{
+	    test:'hello'
+	    }
+	});
+	```
+
+2. 如果使用vue-loader加载.vue文件时（组件文件），webpack在打包对模板进行了渲染，就需要Runtime版本。示例如下：
+
+	```
+	new Vue({
+	  el: '#app',
+	  components: { App },
+	  template: '<App/>'
+	})
+	```
+
+从Compiler版本修改为Runtime版本。只需如示代码：
+<CustomImage src='/growth-record/frame/vue/vue-question-07.png' />
+
+添加一行代码：`'vue$': 'vue/dist/vue.esm.js'` ，然后重新运行编译就可以了