创建vue项目

最新推荐文章于 2024-07-10 22:34:09 发布

CHUAIXYu

最新推荐文章于 2024-07-10 22:34:09 发布

阅读量65

点赞数

文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/chuaixingyu/article/details/128555684

版权

文章目录

安装vue-cli

Vue

npm install -g @vue/cli@4.5.19

创建项目

在终端中打开

vue create 项目名

选择预置的内容，最后一个代表手动配置

Manually select features

选择项目所需要的特性

choose vue version
babel
router
css pre-proessors
linter/formatter

选择vue版本

2.x

选择路由模式

y代表history模式没有#号， n代表hash模式有#号

选择css预处理器

less

格式化和代码检测的配置

默认

代码格式检测时机

默认

配置放在哪

inpackage.json

是否保存特性

使用组件

Ant Design of Vue

npm i --save ant-design-vue@1

完整引入

import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false;

Vue.use(Antd);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});

局部引入

import Vue from 'vue';
import { Button, message } from 'ant-design-vue';
import App from './App';

Vue.config.productionTip = false;

/* v1.1.2 */
Vue.component(Button.name, Button);
Vue.component(Button.Group.name, Button.Group);

/* v1.1.3+ 自动注册Button下组件，如Button.Group */
Vue.use(Button);

Vue.prototype.$message = message;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});