前端VUE网页

vue-cli脚手架

作用

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

安装nodejs并验证

安装nodejs,下一步下一步就可以,可以安装最新的15版本,win7的话可以安装14版本.使用以下dos命令提示符下执行：

node -v     # v8.11.3，至少8以上,最新的是v15.11.0

配置npm

Nodejs下的包管理器,Nodejs中包含了npm,无需单独安装.默认去官网下载资源,可以换成国内的镜像

npm config get registry # 查看当前配置的镜像，结果是默认的国外网址https://registry.npmjs.org/

npm config set registry https://registry.npm.taobao.org #设置成淘宝镜像

npm config get registry #再获取查看,结果是修改后的https://registry.npm.taobao.org/ 

参数说明

注意单词的大小写

-i 安装指令，全拼： install
-S 生产环境，全拼： --save
-D 开发环境，全拼： --save—dev
-O 可选依赖，全拼： --save—optional
-E 精确安装指定模块版本，全称：--save—exact
-g 全局安装，全拼： --global

脚手架安装

vue-cli: 用户生成Vue工程模板（帮你快速构建一个vue的项目，也就是给你一套vue的结构，包含基础的依赖库）
vue-cli: 脚手架工具安装与配置（需要几分钟）

npm install vue-cli -g #安装vue-cli脚手架---可能比较慢,要等几分钟

npm uninstall vue-cli -g #卸载vue-cli脚手架 --- 大可不必

vue –V #查看版本

where vue #vue安装在哪里

 

创建Vue项目 npm

工作空间

进入工作空间目录：D:\workspace\vue

生成vue项目

基于vue.js的官方webpack模板：(乱码无需理会)
webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包

vue init webpack vue01 #此处项目名不能使用大写---可能比较慢,要等

 成功显示：

启动项目 & 停止项目

npm run dev # 自动启动服务，ctrl+c 停止,可能要等几分钟

HBuilderX管理Vue项目

打开Vue项目

 

项目结构

 

安装 element-ui

访问官网: https://element.eleme.cn/#/zh-CN/component/installation,查看组件指南

安装

在工程目录下,使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui –D  # 下载资料,这可能要等几分钟

 

修改 main.js,引入Element

你可以引入整个 Element，或是根据需要仅引入部分组件。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false

import ElementUI from 'element-ui'; //导入element
import 'element-ui/lib/theme-chalk/index.css';//导入element的css
//以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。
Vue.use(ElementUI);//使用element


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

 下载axios依赖

npm install --save axios  

在需要用的组件中导入 

自定义组件 

<template>
  <div class="login_container">
    <div class="login_box">

    </div>
    <div class="png_box" >
      <!-- 头像 -->
      <img src='../assets/eeb74918800e41ee4a5fb39d7a8d6bd.jpg' alt="" width="100px" height="100px" border="3" >

        <!-- 登录表单 -->
        <el-form ref="formref" :rules="rules" :model="form" label-width="50px" class="login_form">
          <!-- 账号 -->
          <el-form-item prop="phone">
            <el-input v-model="form.phone"  placeholder="请输入账号"></el-input>
          </el-form-item>
            <!-- 密码 -->
          <el-form-item prop="password">
            <el-input v-model="form.password" placeholder="请输入密码"  show-password></el-input>
          </el-form-item>

 <el-form-item class="btns">
    <el-button type="primary" @click="onSubmit">登录</el-button>
    <el-button type="info" @click="resetLgonFrom">取消</el-button>
  </el-form-item>

          </el-form>
    </div>
  </div>
</template>




<script>
import axios from 'axios';

export default {
  data() {
    return {
      form: {
      phone: '13688888888',
      password: 'qqq',
      },
      // 验证规则
      rules: {
        phone: [
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    { min: 5, max: 13, message: '长度在 5 到 13 个字符', trigger: 'blur' }

        ],
        password:[
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 18, message: '长度在 3到 18个字符', trigger: 'blur' }
          ]
      }
    }
  },
  methods: {
        onSubmit() {
          // 登录按钮
          console.log(this.form.phone);

          axios.post('http://hostlocal:8081/wnapp/app/login',this.form) .then(
response=>{//successcallback

          console.log(response.data);
          })
        },
        resetLgonFrom(){
          // 取消按钮
          // console.log(this);
          this.$refs.formref.resetFields();
        }
      }
}

</script>



<style >
.login_container{
  background-color: #409EFF;
  height: 100%;
}
.login_box{
  background-color: #C0C4CC;
  height: 300px;
  width: 300px;
  border-radius: 10px;
  position: absolute;
  left: 40%;
  top: 40%;
}
  .png_box{
    height: 350px;
    width: 300px;
    position: absolute;
    left: 40%;
    top: 35%;
    border-radius: 20px;
  }
.login_form{
  position: absolute;
  bottom: 5px;
}
</style>

自定义路由规则

 路径遇到就会跳转

 修改App.vue

<template>
  <div id="app">

   <!-- 使用路由规则-->
       <router-link to="/login">login</router-link>
       <router-link to="/t2">t2</router-link>
       <router-view></router-view>
  </div>
</template>

<script>

  import Car from './components/Car.vue'

export default {
  name: 'App',
  components:{

  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>