Building Vue cli scaffold

1. Install git

2. Install node and configure environment variables, using zip version

   # Check whether node is installed successfully 
   node -v 
   

3. Use Taobao image

   npm config set registry https://registry.npm.taobao.org
   # Check whether the configuration is successful
   npm config get registry 
   

4. Install node module cnpm

   npm install -g cnpm --registry=https://registry.npm.taobao.org
   

5. Global install Vue cli

   cnpm install vue-cli -g
   # Check if the installation is successful
   vue 
   

6. Initialize the application with a webpack skeleton, just like a maven skeleton

   vue init webpack myproject
   cd myproject 
   cnpm install 
   

   

7. Operation item

   npm run dev 
   

Introducing element UI

1. Modify main.js

   import Vue from 'vue'
   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   import App from './App'
   import router from './router'
   
   
   Vue.config.productionTip = false
   
   Vue.use(ElementUI)
   
   
   /* eslint-disable no-new */
   new Vue({
     el: '#app',
     router,
     components: { App },
     template: '<App/>'
   })
   
   

   In fact, only three changes have been made

   import ElementUI from 'element-ui'
   import 'element-ui/lib/theme-chalk/index.css'
   
   Vue.use(ElementUI)
   

   matters needing attention:

   • /*Eslint disable no new * / comments cannot be deleted, otherwise an error will be reported
   • There must be a blank line at the bottom, otherwise it cannot be compiled
   • The number of indented spaces must be consistent, otherwise an error is reported

2. Next, you can take the components of the Vue official website to HelloWorld.vue to play. For example, I made it like this

   <template>
    <el-container style="height: 500px; border: 1px solid #eee">
     <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
       <el-menu :default-openeds="['1', '3']">
         <el-submenu index="1">
           <template slot="title"><i class="el-icon-message"></i>Navigation one</template>
           <el-menu-item-group>
             <template slot="title">Group one</template>
             <el-menu-item index="1-1">Option 1</el-menu-item>
             <el-menu-item index="1-2">Option 2</el-menu-item>
           </el-menu-item-group>
           <el-menu-item-group title="Group 2">
             <el-menu-item index="1-3">Option 3</el-menu-item>
           </el-menu-item-group>
           <el-submenu index="1-4">
             <template slot="title">Option 4</template>
             <el-menu-item index="1-4-1">Option 4-1</el-menu-item>
           </el-submenu>
         </el-submenu>
         <el-submenu index="2">
           <template slot="title"><i class="el-icon-menu"></i>Navigation two</template>
           <el-menu-item-group>
             <template slot="title">Group one</template>
             <el-menu-item index="2-1">Option 1</el-menu-item>
             <el-menu-item index="2-2">Option 2</el-menu-item>
           </el-menu-item-group>
           <el-menu-item-group title="Group 2">
             <el-menu-item index="2-3">Option 3</el-menu-item>
           </el-menu-item-group>
           <el-submenu index="2-4">
             <template slot="title">Option 4</template>
             <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
           </el-submenu>
         </el-submenu>
         <el-submenu index="3">
           <template slot="title"><i class="el-icon-setting"></i>Navigation three</template>
           <el-menu-item-group>
             <template slot="title">Group one</template>
             <el-menu-item index="3-1">Option 1</el-menu-item>
             <el-menu-item index="3-2">Option 2</el-menu-item>
           </el-menu-item-group>
           <el-menu-item-group title="Group 2">
             <el-menu-item index="3-3">Option 3</el-menu-item>
           </el-menu-item-group>
           <el-submenu index="3-4">
             <template slot="title">Option 4</template>
             <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
           </el-submenu>
         </el-submenu>
       </el-menu>
     </el-aside>
   
     <el-container>
       <el-header style="text-align: right; font-size: 12px">
         <el-dropdown>
           <i class="el-icon-setting" style="margin-right: 15px"></i>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item>See</el-dropdown-item>
             <el-dropdown-item>Newly added</el-dropdown-item>
             <el-dropdown-item>delete</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
         <span>Xiao Hu Wang</span>
       </el-header>
   
       <el-main>
         <el-table :data="tableData">
           <el-table-column prop="date" label="date" width="140">
           </el-table-column>
           <el-table-column prop="name" label="Full name" width="120">
           </el-table-column>
           <el-table-column prop="address" label="address">
           </el-table-column>
         </el-table>
       </el-main>
     </el-container>
   </el-container>
   </template>
   
   <script>
    export default {
       data() {
         const item = {
           date: '2016-05-02',
           name: 'Xiao Hu Wang',
           address: 'Lane 1518, Jinshajiang Road, Putuo District, Shanghai'
         };
         return {
           tableData: Array(20).fill(item)
         }
       }
     };
   </script>
   
   <style>
     .el-header {
       background-color: #B3C0D1;
       color: #333;
       line-height: 60px;
     }
   
     .el-aside {
       color: #333;
     }
   </style>
   
   

3. It looks like this

A little promotion

It's not easy to create. I hope to support my open source software and my gadgets. Welcome to gitee to click stars, fork, and mention bug s.

Excel general import and export, support excel formula Blog address: https://blog.csdn.net/sanri1993/article/details/100601578 gitee: https://gitee.com/sanri/sanri-excel-poi

Use template code, generate code from database, and some small tools often used in projects Blog address: https://blog.csdn.net/sanri1993/article/details/98664034 gitee: https://gitee.com/sanri/sanri-tools-maven