如何开始一个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')main.js
App.vue"app">"click('user')"> user "click('coder')" type="primary">coder "click('index')" type="success">index "info">信息按钮 "warning">警告按钮 "danger">危险按钮 class="box-card" style="width:800px">
import Vue from 'vue' import Router from 'vue-router' import Home from '@/views/user' Vue.use(Router) export default new Router({ routes: [ { path: '/user', name: 'user', component: Home }, { path: '/index', name: 'index', component: () => import('@/views/index.vue') } ], mode: "history"//干掉地址栏里边的#号键 })router/index.js
views/index.vue我是测试
views/user.vueclass="hello">class="box-card"> 我是user "Vue logo" src="@/assets/logo.png">
for="o in 4" :key="o" class="text item"> {{'user列表内容 ' + o }}