一、创建项目
等待创建,这个创建过程可能会比较长,也和网速有关,要耐心等待。
二、启动项目
(1).点击左下角终端按钮,启动终端。
(2).启动成功后,输入npm run serve命令,回车,启动项目。
(3).复制以下一个网址,到浏览器运行。
至此,一个vue-cli项目就搭建成功了! 以下是关于项目的一些介绍。
三、项目详细介绍
1.创建组件(Login组件和Main组件)
右键点击components->新建->vue文件
同理,创建Main组件。
2.组件路由
由于创建好的组件不能直接通过文件名访问,因此需要借助vue中组件路由功能进行访问。
(1).下载安装vue router组件
vue router组件可以让vue把所有的组件管理起来,并为每一个组件配置一个映射地址。
启动终端,输入npm i vue-router@3.5.3命令。
(2).在src目录下创建一个router目录,并在该目录中创建一个index.js文件,在index.js文件中配置路由。
/* 导入注册我们自己的组件 */
import Login from "../components/Login.vue"; //组件路径
import Main from "../components/Main.vue";
Vue.use(router)
/* 定义组件路由 */
var rout = new router({
routes: [
{
path: '/login', // 路由路径
name: 'login',
component: Login //组件名
},
{
path: '/main',
component: Main
}
]
});
//导出路由对象
export default rout;
(3).在main.js中配置路由组件
// 导入路由组件
import router from './router/index.js'
Vue.use(router);
new Vue({
render: h => h(App),
router,
}).$mount('#app')
(4).在app.vue中添加<router-view></router-view>
router-view :当你的路由path 与访问的地址相符时,会将指定的组件替换该 router-view
3.访问组件
重新启动vue-cli项目,直接在浏览器地址栏输入网址http://localhost:8080/#/login 即可访问添加的Login组件。
输入网址链接 http://localhost:8080/#/main 即可访问Main组件。
4.ElementUI
(1).下载安装ElementUI
![](https://i-blog.csdnimg.cn/blog_migrate/306659b8da06b29772b76440b14fb6db.png)
(2).在main.js中配置ElementUI
在main.js中写入以下内容:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
![](https://i-blog.csdnimg.cn/blog_migrate/f937bcd72284eb36abf9aaca75375b42.png)
(3).向Login组件中引入Element表单组件,生成登录表单
组件概述:
下面引入表单,打开ElementUI官方网站Element - The world's most popular Vue UI framework
也可以在组件中添加样式
重新启动项目,在浏览器输入Login组件的网址http://localhost:8080/#/login
这样,Login组件就做好了, 你会发现通过ElementUI组件库引入一些组件后,制作前端界面的效率得到了很大提高。
(4).向登录按钮中添加事件,点击按钮进行路由跳转