第一步,如何新建一个vue-cli3 + ant-design
2020-03-02 本文已影响0人
fallfilm
第一步源码 https://github.com/niuzhifeng616/ant-design-template
一、你需要电脑安装有
二、使用vue-cli3新建一个空的工程
新建vue-cli3项目有两种方式
vue create name
vue ui
我们以vue create name
方式创建 (选择自定义方式)
Babel 是一个 JavaScript 编译器
TypeScript
有兴趣自己看,我们这里用的JavaScript
Progressive Web App (PWA) Support
这里我们是一个中后台项目模板,不需要PWA
Router
路由
Vuex
状态管理工具
CSS Pre-processors
css预处理器
Linter / Formatter
在编辑器中报告检测到的错误和警告
Unit Testing
单元测试
E2E Testing
端到端测试
接下来回车
1809A188-3926-4B55-BB2F-C0B885E23FF9.png
020BD969-2EF8-49C8-A462-F2F1800B53C2.png询问路由是否使用history模式
我们选择 Y 回车
E57DB73D-97EE-4AC6-9F0E-9B4944790A16.png选择一种预处理器 我们这里选择
less
原因之一是ant-design-vue
使用的是less
87844A9E-8FDC-4538-9BB9-AF51467BD08B.png这里我们选择
ESLint + Prettier
365BEEFF-BBF0-412F-8D5E-CEC190890035.png保存时
提交代码时
这两个我们都需要
9AECD9B7-F002-4767-B64F-A6435D4126B4.png测试运行器 这里我们选择
Jest
配置文件都是单独的文件
放到一个文件里package.json
我们选第一个
后面的就无所谓了,然后就可以新建出一个工程了!
附上命令行
MacBook-Pro:template ushishipou$ vue create name
Vue CLI v4.0.5
┌─────────────────────────────────────────────┐
│ │
│ New version available 4.0.5 → 4.2.3 │
│ Run yarn global add @vue/cli to update! │
│ │
└─────────────────────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel,
Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper serv
er setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer an
d CSS Modules are supported by default): Less
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint on save, Lint
and fix on commit
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, Post
CSS, ESLint, etc.? In dedicated config files
三、安装ant-design-vue
进入项目目录
yarn add ant-design-vue moment
yarn install //安装依赖
moment 是时间的一个插件
到这里,一个空的新工程就配置好了
四、自定义webpack,配置babel
main.js
import Vue from "vue";
import { Button } from "ant-design-vue"; // 按需引入 ant-design-vue 组件
import App from "./App.vue";
import router from "./router";
import store from "./store";
/*
注册引入的组件
*/
Vue.use(Button);
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
这里没有引入 ant-design-vue 样式文件
我们在 babel 中配置引入的样式文件
babel.config.js
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
] // `style: true` 会加载 less 文件
]
};
这里需要安装 babel-plugin-import
vue.config.js (需要自己在根目录下创建这个文件)
module.exports = {
css: {
loaderOptions: {
less: { javascriptEnabled: true } // 开启后 antd 样式 可以引用.less文件
}
}
};
到这里就新建好了!