element-ui

Element-ui

• 安装 element-ui

  npm i element-ui -S
  

• 在 main.js中导入vue

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

• 在 web.conf.js中 更新字体,添加 ttf|woff

  {
  
    test: /\.(png|jpg|gif|svg|ttf|woff)$/,
  
    loader: 'file-loader',
  
    options: {
  
      name: '[name].[ext]?[hash]'
    }
  }
  

• 安装babel插件

  npm install\
  babel-plugin-syntax-jsx\
  babel-plugin-transform-vue-jsx\
  babel-helper-vue-jsx-merge-props\
  babel-preset-es2015\
  --save-dev
  

• 编辑 .bablerc文件

  {
    "presets": [
      ["es2015", { "modules": false }],
      ["env", {
        "modules": false,
        "targets": {
          "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
        }
        }
      ],
      "stage-2"
    ],
    "plugins": ["transform-vue-jsx", "transform-runtime"]
  }
  

• index.js

  import { Button, Select  } from 'element-ui';
  vue.use(Button)
  vue.use(Select)
  

• element-ui

  <template>
      <div>
          <div>
              <h2>用户注册</h2>
              <el-row>
                  <el-input v-model="username" placeholder="请输入内容"></el-input>
                  <el-input v-model="password" placeholder="请输入内容" show-password></el-input>
                  <el-button @click="register">注册</el-button>
              </el-row>
          </div>
      </div>
  </template>
  
  
  <script>
  export default {
      
      name:'goods',
      data(){
          return {
              username:'',
              password:'',
          }
      },
      methods:{
          register:function(){
              var params = new URLSearchParams();
              params.append('name',this.username);
              params.append('password',this.password)
              this.axios({
                  method:'post',
                  data:params,
                  url:'api/app01/add/'
              }).then(res=>{
                  
              }).catch(error=>{
  
              });
          }
      }
  }
  </script>