vue写HTML5页面如何用vue写页面

转载

蓝色忧郁花 2023-12-19 22:34:27

文章标签 vue写HTML5页面前端Vue ico css 管理系统 文章分类 HTML5 移动开发

vue初学——编写第一个页面 vue+Element ui

前面介绍了如何新建vue工程vscode新建vue工程，这篇就介绍如何编写自己的第一个页面

开始之前，先介绍下vue工程的目录结构

vue写HTML5页面如何用vue写页面_前端Vue

build 项目构建(webpack)相关代码
config 项目相关配置，配置端口信息等
node_modules 项目依赖等
src>assets 放置一些图片如项目的logo、icons
src>conponents 项目的一些组件，如自定义组件
src>router 路由
src>App.vue 项目入口
src>main.js 项目核心文件
static 项目静态文件，图片、字体等
index.html 首页入口文件，可以添加一些 meta 信息或统计代码等
package.json 项目的配置文件，一般是依赖项配置

工程新建后，我们在命令窗口直接输入npm run dev就可以直接启动项目，访问localhost:8080就能出现如下页面：

vue写HTML5页面如何用vue写页面_vue写HTML5页面_02

其实，在学习vue，具备一些前端的技术如jQuery、css更好。

vue做为一个响应渐进式UI框架，它的有点主要体现编译后被压缩体积小、预处理运行效率高、数据双向绑定（和angularjs差不多）、开源框架丰富等

下面我们进入如何编写第一个页面——这里的编写其实是改造
我们对HelloWorld.vue进行改造，将其改造成登录页面，将template中的div块儿改成如下页面

<div class="login">
    <el-form class="login_form">
      <h1>{{ msg }}</h1>
      <el-row>
        <el-col>
          <el-input v-model="loginForm.username" prefix-icon="el-icon-user-solid" placeholder="用户名">
          </el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-input v-model="loginForm.password" prefix-icon="el-icon-key" placeholder="密码">
          </el-input>
        </el-col>
      </el-row>
      <el-button style="width:100%;" @click="handleLogin" type="primary">登陆</el-button>
    </el-form>
  </div>

这里直接使用了element-ui，用它之前我们需要将它的依赖引入进来，命令行执行npm i element-ui -S，安装好后，配置依赖main.js中添加如下配置:
import Element from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'

main.js中增加 Vue.use(Element) 把Element 样式引入并使用

将script改成如下

export default {
  name: 'Index',
  data () {
    return {
      loginForm: {
        username: undefined,
        password: undefined
      },
      msg: '子金XX管理系统'
    }
  },
  methods: {
    handleLogin() {
      alert("欢迎来到子金XX管理系统");
    }
  }
}

这里data就是我们vue在实例化时，对象中的所有的 property 加入到 vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，更新为最新的值。
methods 则是我们响应的event集合

将style改成如下

.login_form {
  border: #ccc 1px solid;
  width: 26%;
  padding: 1%;
  margin-left: 36%;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}