vue入门

最新推荐文章于 2023-07-26 14:31:04 发布

nohero1

最新推荐文章于 2023-07-26 14:31:04 发布

阅读量265

点赞数

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/nohero1/article/details/106405096

版权

本文档详细介绍了Vue的入门步骤，包括Node.js的下载与安装，使用淘宝NPM镜像，Vue及Vue CLI的安装。接着通过Vue CLI初始化项目，并在Idea中创建Vue项目。讲解了Element-UI的基础应用，如创建第一个表单，同时涉及axios的安装与使用，以及Vue Router的基本配置和页面跳转操作。

摘要由CSDN通过智能技术生成

安装

node下载

node官网下载地址

node安装

傻瓜式安装，查看版本

npm -v
6.14.4

使用淘宝 NPM 镜像

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

安装完后可以使用cnpm

cnpm install [name]

安装vue

cnpm install vue

安装vue-cli

 cnpm install --global vue-cli

初始化项目

通过脚手架初始化项目代码

会在cmd所在的路径创建项目代码

vue init webpack [项目名称]:
vue init webpack demo
后续一系列选择按 y 确认

运行代码

需要进入代码根目录

cd demo
cnpm install
cnpm run dev

访问程序

运行成功后能正常访问 http://localhost:8080/

编辑器

idea

安装vue插件

新建项目

file -> new project -> static web -> static web -> vue-driver

在左下角控制台 terminal输入命令，其实就时个cmd，如果命令不存在，重启idea就可以
vue init webpack
一直确认就行

启动开发环境
cnpm install
cnpm run dev

element-ui

element官网

cnpm i element-ui -S

main.js 加入element-ui 引用

// 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 ElementUI from 'element-ui' // 1
import 'element-ui/lib/theme-chalk/index.css' // 2

import App from './App'
import router from './router'

Vue.use(ElementUI) // 3

Vue.config.productionTip = false

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

修改 HelloWorld.vue内容为

<template>
  <el-row>
    <el-button icon="el-icon-search" circle></el-button>
    <el-button type="primary" icon="el-icon-edit" circle></el-button>
    <el-button type="success" icon="el-icon-check" circle></el-button>
    <el-button type="info" icon="el-icon-message" circle></el-button>
    <el-button type="warning" icon="el-icon-star-off" circle></el-button>
    <el-button type="danger" icon="el-icon-delete" circle></el-button>
  </el-row>
</template>

创建第一个表单

例子从element官网拷贝而来，只需要覆盖HelloWorld.vue文件就可以

<template>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="ruleForm.name"></el-input>
    </el-form-item>
    <el-form-item label="活动区域" prop="region">
      <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
        <el-option label="区域一" value="shanghai"></el-option>
        <el-option label="区域二" value="beijing"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="活动时间" required>
      <el-col :span="11">
        <el-form-item prop="date1">
          <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker>
        </el-form-item>
      </el-col>
      <el-col class="line" :span="2"