Vue3快速应用工程化

这里将介绍如何使用vue-cli快速进行应用工程化。在此之前,需要进行一些额外的操作:

npm config set registry http://registry.npmmirror.com
npm install -g @vue/cli@4.5.8

这里先配置其镜像地址为国内的淘宝镜像,之后使用全局方式安装vue-cli,版本为4.5.8。对于版本的选择可以使用如下的方式进行查看:

npm view @vue/cli versions

一切准备就绪后,就可以开始后续的操作了。首先创建一个应用:

$ vue create hello-world

当然也可以使用vue ui以图形化界面的方式进行项目的创建。整个过程需要联网,否则是无法成功创建项目的。其中src/main.js中的代码如下:

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

接着使用如下的命令运行vue项目:

npm run serve

为了后续可以在vue中使用HTTP请求,我们可以选择安装axios库,在项目工程目录下运行如下命令:

$ npm install --save axios vue-axios

安装完成可以在package.json文件中看到更新后的依赖信息:

"dependencies": {
    "axios": "^1.11.0",
    "core-js": "^3.8.3",
    "vue": "^3.2.13",
    "vue-axios": "^3.5.2"
  },

下面我们使用Element-Plus为界面进行美化,在此之前先进行安装相应的库:

$ npm install --save element-plus

在main.js中添加如下的内容:

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

我们为之前的例子添加1个按钮,当点击时将IP地址对应的经纬度显示出来,其对应代码如下:

<template>
<el-button type="success" @click="check_ip">成功</el-button>
<el-table :data="tableData">
    <el-table-column prop="regionName" label="省份"></el-table-column>
    <el-table-column prop="city" label="城市"></el-table-column>
    <el-table-column prop="lat" label="纬度"></el-table-column>
    <el-table-column prop="lon" label="经度"></el-table-column>
</el-table>
</template>

<script>
import axios from "axios"
export default {
  name: 'HelloWorld',
  data(){
    return {
       tableData: []
     }
  },
  props: {
    msg: String
  },
  methods:{
     check_ip(){
       axios.get("http://ip-api.com/json/114.114.114.114").then(res=>{
       this.tableData.push(res.data);
      }).catch(err=>{
        console.error(err)
      });
     }
  }
}
</script>

一切准备就绪后就可以使用下面的命令构建工程了:

npm run build

紧接着我们来看vue的路由管理,首先安装vue-router模块。

npm install vue-router@4 -s

路由的作用是页面管理,我们将定义好的Vue组件绑定到指定的路由,然后通过路由指定在何时或何处渲染这个组件。在src/components目录下创建2个文件,其中MyDemo1.vue的内容如下:

<template>
  <h1>示例页面1</h1>
</template>
<script>
export default {	
};
</script>

而MyDemo2.vue的内容如下:

<template>
  <h1>示例页面2</h1>
</template>
<script>
export default {	
};
</script>

接着修改App.vue文件的内容:

<template>
  <h1>Hello App!</h1>
  <p>
    <RouterLink to="/demo1">页面一</RouterLink>
    <br/>
    <RouterLink to="/demo2">页面二</RouterLink>
  </p>
  <RouterView />
</template>

<script>
export default {
  name: 'App',
  components: {
  }
}
</script>

其中router-link组件是一个自定义的链接组件,其允许在不重新加载页面的情况下更改页面的URL。而router-view用来渲染与当前URL对应的组件。再修改项目中的main.js文件,在其中进行路由的定义与注册。

import { createRouter, createWebHashHistory } from "vue-router"

import Demo1 from "./components/MyDemo1.vue"
import Demo2 from "./components/MyDemo2.vue"

const app = createApp(App)
const routes = [
  { path: "/demo1", component: Demo1 },
  { path: "/demo2", component: Demo2  }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

const app = createApp(App)
app.use(router)
app.use(ElementPlus,VueAxios,axios)
app.mount('#app')

最后我们来看下如何将上述多个页面整合在一起,首先是对HelloWorld.vue中的修改:

<template>
  <div class="hello">
    <el-container>
      <el-aside width="100px">
        <el-menu :default-active="$route.path" router=true>
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/demo1">测试1</el-menu-item>
          <el-menu-item index="/demo2">测试2</el-menu-item>
          <el-menu-item index="/user/zhangsan/123">用户</el-menu-item>
        </el-menu>
      </el-aside>
    <el-main>
        <el-header>
         <h1>{{ msg }}</h1>
        </el-header>
        <RouterView />
    </el-main>
    </el-container>
    <el-footer>
      版权所有,请勿转载
    </el-footer>
  </div>
</template>

通过Element-Plus添加竖直菜单栏,并使用Vue-Router的路由进行跳转。

参考文章:

https://element-plus.sxtxhy.com/zh-CN/guide/installation.html#unpkg

如果喜欢这篇文章或对您有帮助，可以：[☕] 请我喝杯咖啡 | [💓] 小额赞助

码力全开 / Vue3快速应用工程化