最近准备学习下后台管理系统的搭建,并且采用现在流行的前后端分离的架构,那么vue自然就是首选了。
这里我只讲一些实战操作,一些基础的语法各位就自己去学习了。包括环境的安装,如node的安装,请自行百度。
安装vue-cli脚手架
假设你已经安装好node的环境,那么就可以开始使用npm命令大展拳脚了。通过以下命令安装vue-cli
npm install -g @vue/cli
创建项目
这里我主要是通过vue的界面化创建项目。在命令窗口输入vue界面化的启动命令
vue ui
就会自动在浏览器打开项目创建和管理的界面
选择“创建”那一栏开始进行基于vue-cli的脚手架项目的创建。
输入项目名称,可以默认或者选择npm的包管理器(默认就是npm),点击下一步。
上图是项目的预设,就是类似项目需要什么插件依赖已经都加入进来了,如果你之前创建过项目并且保存过预设,对应的预设名称就会出现在这里,因为是第一次创建,我们选择手动。下一步
这里我们只选择babel,router(路由),linter/formatter(代码格式化)和最后一个使用配置文件。下一步
选择ESlint + Standard confing,lint onsave勾选。最后点击创建。
这个时候就会弹出如上的一个弹框询问我们是否保存成预设,就是会在上面步骤在的预设那一栏供你选择。这里我不保存预设,直接创建项目。
这个时候项目就算创建完成了。
配置插件(element-ui)
因为选择我打算使用element-ui作为界面ui,所以这里我们需要配置一下element-ui。在插件栏里面选择“添加插件”,搜索element-ui插件并选中,点击安装vue-cli-plugin-element开始安装。如下图
安装完成之后出现如下界面
第一个让你选择是完整引入还是按需引入,这里我们选择import on demand按需引入。然后点击完成安装,这样element-ui插件就安装完成了。
安装axios依赖(网络请求库)
选择依赖栏==》安装依赖,找到axios进行安装,记住这里选择的是运行依赖。如下图
这里我们项目也就算简单搭建好了,选择任务–》serve --》运行,运行完成之后选择启动app,如下图
出现如下页面,所以项目已经正常跑起来了。
改造
1.修改app.vue
app.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<style>
</style>
2.清空views和components文件夹里面的内容,在views文件夹创建home/index.vue文件
home/index.vue
<template>
<div>hell0, vue!!</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style lang="less" scoped>
</style>
注:这里我们用的style lang=“less”
,所以需要按照开发依赖less和less-loader,这里就不具体说的,方法同上。
3.修改路由router
router/index.vue
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/home'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
}
]
const router = new VueRouter({
routes
})
export default router
重新启动app
至此,整个项目算是初始化完成了。
欢迎关注本人公众号和小程序,谢谢