如何开始一个vue +element-ui 项目
npm install --registry=https://registry.npm.taobao.org
1、通过cnpm使用
npm install -g cnpm --registry=https://registry.npm.taobao.org
配置淘宝安装镜像 加快速度
2、全局安装 下载到本地
cnpm install -g @vue/cli
vue/cli 是一个vue工具插件 用来快速 创建 构建 发布 vue项目的
3、创建项目
// 创建一个vue项目
vue create projectname
//cd 到项目目录下面 安装 项目需要用到的插件
cnpm install element-ui --save-dev
cnpm install vue-router --save-dev
import Vue from 'vue' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue' import router from './router' Vue.use(ElementUI); Vue.config.productionTip = false new Vue({ router, render: h => h(App), }).$mount('#app')
<template> <div id="app"> <el-container> <el-header> <el-row> <el-button @click="click('user')"> user</el-button> <el-button @click="click('coder')" type="primary">coder</el-button> <el-button @click="click('index')" type="success">index</el-button> <el-button type="info">信息按钮</el-button> <el-button type="warning">警告按钮</el-button> <el-button type="danger">危险按钮</el-button> </el-row> </el-header> <el-main> <el-card class="box-card" style="800px"> <!-- 展示router --> <router-view></router-view> </el-card> </el-main> </el-container> </div> </template> <script> export default { name:"app", data(){ return{ imgUrl:"" } }, methods:{ click(para){ console.log(1); this.$router.push('/'+para) } } } </script>