前段架构学习
前端架构
- 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
- Mand Mobile
- nut-ui
- vant-ui
网友评论