如何開始一個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="width: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 {
    width: 480px;
  }
</style>