如何开始一个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>

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"//干掉地址栏里边的#号键
})

<template> 
 <div>
  
    <p>我是测试</p>
       <HelloForm>
       </HelloForm>
 
 </div>
</template>

<script>

import HelloForm from '@/components/HelloWorld.vue'
export default { 
  name:"index",
  components: {
    HelloForm
  },
  data(){
      return{
          imgUrl:""
      }
  }
}
</script>

<template>
  <div class="hello"> 
<el-card class="box-card">
我是user

    <img alt="Vue logo" src="@/assets/logo.png">
    
  <div v-for="o in 4" :key="o" class="text item">
    {{'user列表内容 ' + o }}
  </div>  
   
</el-card>


  </div>
</template>

 


<style>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
     480px;
  }
</style>