Vue基础入门——从0搭建一个博客

拖了很久的一篇，一直想记录一下Vue开发一个简单的个人前端项目的全过程(免得每写一次前端都要重新查一遍文档和博客)，直到Vue3都出了，我终于写下这篇小短文了(Vue2)。

初始化

首先全局安装vue和vue-cli

npm install -g vue
npm install -g @vue/cli

然后通过vue-cli创建项目

vue init xxx

页面

在src/components下写一些组件，创建文件夹src/pages放页面，在src目录下的App. vue是主组件，也是入口页面，里面通常是放Header，Footer，router-view这些组件，其中router-view是可以根据路由的变化切换页面的，后面会提到。

一个Vue组件有一些通用的结构，如下：

<template>
  <div>
    <!--组件内容-->
  </div>
</template>
<script>  // js部分
export default {
  name:"Navbar", // 组件名
  data() {       // 数据，写成函数的形式，使用数据副本，避免了数据污染
    return {
      current: 'home',
      searchText:"",
    };
  },
  methods: {     // 方法
    search(){
      // ...
    }
  },
  watch:{        // 监听某个数据的变化 
    searchText(nVal){   // 函数名就是监听的数据名，或者写成数据名:function(){}
      //参数就是新值，如果有两个参数，第二个就是旧值
    },
  },
};
</script>
<style scoped>  /** css部分，scoped表示只在组件内生效 **/
</style>

父子组件交互

父组件传值给子组件

在子组件中定义props，包括名字和类型，默认值等等。

<script>
export default {
  props: {
    pageSize: {
      type: Number
    },
  },
}
</script>

父组件传值，注意子组件props的命名是camelCase，而父组件传值则使用横线划分。除此之外还有很多其他的命名规范，就不一一遵守了。

<Pagination 
    :page-size="pageSize"
    @change="pageChange">
</Pagination>

子组件传值给父组件

在子组件中通过调用emit函数来触发父组件的回调函数，例如以下代码触发了父组件的change函数，也就是@change所指定的函数。

this.$emit("change", para);

路由

首先安装vue-router，在main.js同级文件夹里创建routes.js，格式如下

Vue.use(VueRouter)
const routes = [
    {
        path: "/about",
        name: "about",
        component: AboutPage,
    },
    // 路由匹配的优先级问题
    // 如果这个路由放在第一位，后面的/about会匹配到，把about看成page参数
    // {
    //     path: "/:page?/:tag?/:cat?",
    //     name: "home",
    //     component: PostListPage,
    // },

]
const router = new VueRouter({
    routes
})
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) {
    return VueRouterPush.call(this, to).catch(err => err)
}
export default router

在main.js中导入，并作为参数构造Vue实例，注意要在App.vue中配置好<router-view>组件

import router from "./routes";
new Vue({
    render: h => h(App),
    router, // 必须是router或者指定router:xxx
}).$mount('#app')

路由中复杂的参数以及其他配置具体参照文档。

获取数据

通常使用axios来获取数据，在本项目中，用将md文件生成json文件的方法实现一个“伪后端”，将文件放到public文件夹下，axios也同样可以获取到。

this.$axios.get("/data.json").then((resp) => {
    // ...
})

注意axios的使用还需要在main.js中将axios绑定到Vue原型上。

Vue.prototype.$axios = axios

其他

博客里用到了pure.css样式库，用法很简单，先npm安装，然后在main.js里import Purecss from 'purecss'导入，再用Vue.use(Purecss)就能用上这个样式库，其他插件/组件库/样式库等也基本同理，看对应文档即可。

博客除了pure.css，还用到了normalize.css，awesome-icon，mavon-editor等。

运行

在项目目录下先npm install安装依赖包，然后npm run serve可以在本地跑起来，npm run build可以打包成静态文件放服务器上。

这个博客是用了Vercel托管，绑定github项目后，每次push完就会自动构建打包。