vue-cli 3.x安装及ant-design-vue
2020-02-29 18:12
471 查看
vue-cli 3.x
1.安装
[code]npm install -g @vue/cli # OR yarn global add @vue/cli
2.环境(windows)
[code]E:\stydy>node -v v8.12.0 E:\stydy>webpack -v 4.29.6 E:\stydy>npm -v 6.4.1 E:\stydy>vue -V 3.7.0
3.创建项目
我在此处想使用
ant-design-vue,所以创建了一个
antd的项目:
[code]vue create antd
4.项目配置
我选择的项目配置如下:
[code]Vue CLI v3.7.0 ? Please pick a preset: Manually select features ? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? No ? Pick the package manager to use when installing dependencies: NPM
5.运行
依赖安装完成后,cd到该项目路径下,运行:
[code] $ cd antd $ npm run serve DONE Compiled successfully in 4229ms App running at: - Local: http://localhost:8080/ - Network: http://192.168.100.111:8080/ Note that the development build is not optimized. To create a production build, run npm run build.
此时浏览器会访问 http://localhost:8080/ ,看到 Welcome to Your Vue.js App 的界面就算成功了。
6.目录结构
[code]├── README.md ├── babel.config ├── package.json ├── package-lock.json ├── postcss.config.js ├── public │ ├── favicon.ico │ └── index.html ├── src │ ├── assets │ │ └── logo.png │ ├── components │ │ └── HelloWorld.vue │ ├── App.vue │ └── main.js └── .gitignore
使用ant-design-vue
由于在实际开发工程中,加载全部样式/组件会影响前端性能,因此我们直接采取按需加载组件及样式。
1.安装
[code]npm install ant-design-vue --save-dev npm install less less-loader --save-dev
2.引入
src/main.js
[code]// 以 Button 组件为例 import { Button } from 'ant-design-vue' Vue.component(Button.name, Button);
3.组件使用
[code]<template> <div id="app"> <a-button type="danger">Danger</a-button> </div> </template>
4.babel-plugin-import
4.1安装
[code]npm install babel-plugin-import --save-dev
4.2修改
babel.config.js
[code]module.exports = { presets: [ '@vue/app', ], // 配置babel-plugin-import, 用于按需加载组件代码和样式 plugins: [ [ "import", { libraryName: "ant-design-vue", libraryDirectory: "es", style: true } ] ], }
4.3报错解决方案
此时重启项目,会遇到报错情况。以下两种方案任选其一即可
。两种方案:
- 配置
vue.config.js
在根目录下新建vue.config.js
:
[code]module.exports = { // 配置less css: { loaderOptions: { less: { javascriptEnabled: true, } } }, }
- 修改
babel.config.js
[code] // ... plugins: [ [ "import", { libraryName: "ant-design-vue", libraryDirectory: "es", style: 'css' } ] ]
4.4完成
保存,重启项目:
[code]npm run serve
作者:流眸Tel
链接:https://www.jianshu.com/p/b4ee43db09e0
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- vue-cli 3.x安装配置步骤详细说明
- angular开发第一步:Mac安装angular cli+ant design环境
- vue-cli3 ant-design-vue组件部分加载以及二次封装发布到npm
- vue-cli 3.X安装'【 vue' 不是内部或外部命令,也不是可运行的程序 或批处理文件】处理办法
- vue-cli脚手架安装
- 安装vue-cli的坑
- vue-cli3.X快速创建项目的方法步骤
- 使用vue-cli创建项目(包含npm和cnpm的安装nodejs的安装)
- vue-cli安装步骤
- node.js安装+vue-cli安装+创建webpack项目时乱码、特别慢问题+移动端(手机)访问自己的项目
- vue+ant-design 实现table的td元素限定为固定的宽度,超出的字用省略号代替
- Vue-cli脚手架安装
- vue-cli安装及axios基础使用
- windows下vue-cli及webpack 构建网站(一)环境安装
- Vue-CLI 3.X 部署项目至生产服务器
- vue中如何安装vue-cli
- Vue.js开发环境搭建-工具安装(vue-cli)
- 全局安装@vue/cli 后使用vue无法加载!
- 创建vue项目前的准备工作:安装nodejs(npm)、cnpm、vue-cli脚手架
- 安装vue/cli的一些警告的解决方法