美文网首页
Vue3 Vant UI

Vue3 Vant UI

作者: AndyXuuu | 来源:发表于2020-05-06 14:44 被阅读0次

    前段架构学习

    前端架构

    • VS CODE
    • Node 14.1.0
    • Vue 3
    • Vant UI

    安装NVM并配置

    • 安装NVM

    curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

    • 添加到系统环境变量

    vi ~/.zshrc

    #NVM环境变量
    export NVM_DIR="$HOME/.nvm"
    [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
    [ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
    
    • 刷新环境变量

    source ~/.zshrc

    安装nodejs

    • 安装nodejs

    nvm install 14.1.0

    • 切换nodejs

    mvm use 14.1.0

    • 安装cnpm(阿里源)

    sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

    安装Vue 3 并创建项目

    • 安装vue3

    cnpm install -g @vue/cli

    • 创建项目 vue ui 然后根据需求选择依赖和插件
    • Babel
    • Router
    • Vuex
    • Css Pre-processors
    • Unit Testing

    安装Vant UI并配置按需加载

    • 安装依赖 搜索vant 2.8.0 youzan
    • 安装babel-plugin-import

    npm i babel-plugin-import -D

    • 配置按需vant加载 babel.config.js 增加配置
    {
      "plugins": [
        ["import", {
          "libraryName": "vant",
          "libraryDirectory": "es",
          "style": true
        }]
      ]
    }
    

    VSCODE 插件

    • Vetur 语法提示
    • Path Intellisense 路径提示
    • Vue 2 Snippets vue代码模版

    前端优秀框架推荐

    • cube-ui

    https://didi.github.io/cube-ui/#/zh-CN

    • Mand Mobile

    https://didi.github.io/mand-mobile/#/zh-CN/home

    • nut-ui

    https://github.com/jdf2e/nutui

    • vant-ui

    https://github.com/youzan/vant

    相关文章

      网友评论

          本文标题:Vue3 Vant UI

          本文链接:https://www.haomeiwen.com/subject/luhwghtx.html