wufan's blog

分类 · 前端

首页

关于

vue

vue-cli3.0+中使用CDN加载资源

在vue.config.js中配置使用CDN加载的modules（使用全局变量代替），比如

 chainWebpack: config => {
    config.set('externals', {
        'vue': 'Vue',//"库名:引入后的别名" 
        'vue-router': 'VueRouter',
        'vuex': 'Vuex',
        'mint-ui': 'MintUI'
    })
  }

然后在public中的index.html加入链接,比如上面所列的库

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.3/dist/vue-router.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/mint-ui/lib/style.css" />
    <script src="https://unpkg.com/mint-ui/lib/index.js"></script>

资源要自己找，这边推荐两个CDN平台

这样就配置完成了，改成CDN的话，有些库的使用方式需要改一下，参照每个库的官方说明即可，比如Vue Router
说明了CDN和NPM安装的区别:

  • CDN
<!-- 在 Vue 后面加载 vue-router，它会自动安装的： -->
<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>
  • NPM
npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

其他的不一一说明了

更多
vue

vue-cli3.0+按需引入mint-ui

安装

首先需要babel-plugin-component

npm install babel-plugin-component -D

配置

然后在babel.config.js中配置

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
       [
      "component",
      {
        libraryName: "mint-ui",
        style: true,
      }
    ],
  ]
};

使用

在main.js中使用

import { Swipe, SwipeItem } from "mint-ui";

更多
loading..
博客HexoGitHub-Pages

10分钟搭建个人静态博客网站

只看步骤的话，跳到快速开始

写在前面

静态网站非常适合专注于内容的网站，比如像博客网站，这边记录一下我搭建这个静态博客的步骤，首先选择服务器，虽然现在云服务器很方便，但如果只是做个静态网站的话，有个更方便的方法是用Github Pages，将资源部署在github上，并且还会有自己的域名，省时省力。

更多
AngularJS前端

AngularJS简单介绍

AngularJS是一款优秀的前端框架，主要解决hmtl在构建web应用上不足的问题。AngularJS核心的特点是模块化，数据的双向绑定，依赖注入。

模块化

在html标签中使用ng-app指示符定义一个模块

<html ng-app="mall-app" style="height: 100%;">

更多
12