Vue3 Vant UI

前段架构学习

前端架构

• 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