Web开发

1、Vue2

npm install -g @vue/cli

vue create my-project
vue ui

1. 1 常见指令

1.1v-bind 和 v-model

• 通过v-bind或者v-model绑定的变量，必须在数据模型中声明。

1.2 v-on

1.3 v-if 和 v-show

1.4 v-for

1.2 生命周期

• mounted:挂载完成，Vue初始化成功，HTML页面渲染成功。 (发送请求到服务端，加载数据）

1.3 Axios

1.4 工程化

vue.config.js文件中，修改前端默认端口。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 修改端口号配置
  devServer: {
    port: 7000
  }
})

<template>
  <div>
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "hello world"
    }
  },
    
  methods: {

  }
}
</script>


<style></style>

1.5 路由

前端路由:URL中的hash(#号)与组件之间的对应关系。

npm install vue-router@3.5.1

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  // 配置路由方式1
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  // 重定向
  {
    path: '/',
    redirect: '/home'
  },
  // 配置路由方式2
  {
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  }
]
// 哈希模式
// const router = new VueRouter({
//   mode: 'hash',
//   routes
// })
const router = new VueRouter({
  mode: 'history',
  routes
})

export default router

<router-link to="/..."></router-link>

<router-view></router-view>

2、Ellement组件库

2.1 使用element

main.js：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

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

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)  // 通过render函数将App组件渲染到页面上
}).$mount('#app')

ElementView.vue：

<template>
    <div>
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // data
        }
    },
    methods: {
        // methods
    },

}
</script>

<style></style>

App.vue：

<template>
  <div>
    <!-- 3. 使用ElementView组件 -->
    <ElementView></ElementView>
  </div>
</template>

<script>
// 1. 导入ElementView组件
import ElementView from './views/Element/ElementView.vue'
export default {
  // 2. 注册ElementView组件
  components: { ElementView },
  data() {
    return {
      message: "hello world"
    }
  },
  methods: {

  }
}
</script>


<style></style>

3、部署

netstat -ano | findStr 80

端口被占用：

Nginx默认占用80端口号，如果80端口号被占用，可以在nginx.conf中修改端口号。(netstat-ano | findStr 80)