Mooc-client开发 --- day1

使用技术

1. vue-cli – vue的官方脚手架
2. vue3 – 前端框架
3. typescript — js的超集，拥有更好的代码提示以及类型约束
4. pinia — 相比于vuex，pinia的体积更小，更加适合中小型项目

开发步骤

1. 使用VUECLI脚手架创建项目

npm install -g @vue/cli
# OR
yarn global add @vue/cli
# THEN
vue create project-name

2. 安装pinia

yarn add pinia

3. 在src文件夹中新建store文件夹，并且新建index.ts文件

// store/index.ts
import { createPinia } from 'pinia';
const store = createPinia();
export default store;

4. 在main.ts中引入store

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from '@/store';
const app = createApp(App);
app.use(router);
app.use(store);
app.mount('#app');

5. 引入UI框架–vant

yarn add vant

6. 实现按需加载

yarn add ts-import-plugin -D

// vue.config.js
const { defineConfig } = require('@vue/cli-service');
const tsImportPluginFactory = require('ts-import-plugin');

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  chainWebpack: (config) => {
    config.module
      .rule('ts')
      .use('ts-loader')
      .tap((args) => {
        args.getCustomTransformers = () => ({
          before: [
            tsImportPluginFactory([
              {
                libraryName: 'vant',
                libraryDirectory: 'es',
                style: true,
              },
            ]),
          ],
        });
        return args;
      });
  },
});

7. 创建style文件夹，用于存放全局样式
8. 使用reset.css，对HTML元素进行样式重置

/*
  style/reset.css
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

9. 在App.vue中引入

// App.vue
<style lang="scss">
@import url("@/style/reset.css");
</style>

前置准备工作基本完成，开始思考页面的设计

临时花了20分钟设计了一下，毕竟不是专业设计，所以贼丑这也是没办法的。。。。