vue-cil搭建项目

一、使用 HbuilderX 快速搭建一个 vue-cli 项目

1.需要的环境——Node.js

2.搭建Vue-cil项目

二、组件路由

1.安装vue-router

2.创建router目录

3.使用路由

4.在main.js中配置路由

vue-cli 官方提供的一个脚手架，用于快速生成一个 vue 的项目模板；预先定义好的目录结构

及基础代码，就好比咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚

手架，我们的开发更加的快速；

一、使用 HbuilderX 快速搭建一个 vue-cli 项目

1.需要的环境——Node.js

简单的说 Node.js 是一个前端 js 运行环境或者说是一个 JS 语言解释器。

下载地址：https://nodejs.org/en/download

在官网选择版本下载后，找到该程序包，点击下载。

根据提示进行安装操作

到安装路径这里自行选择即可

其余部分直接点next即可

最后finish结束即可。

这里我们可以win+R进行测试，输入node -v和npm -v，如果出现以下版本号则安装好了。

2.搭建Vue-cil项目

创建好后，点击下面红框终端，输入 "npm run serve"，启动成功后,会出现访问项目地址:http://xxx.x.x.x:8080/ 在命令行中 ctrl+c 停止服务。

二、组件路由

1.安装vue-router

在终端点击Ctrl+C，选择结束运行项目

在终端输入命令：npm i vue-router@3.5.3

等待其下载完毕即可。

2.创建router目录

在index.js文件中配置路由

import Vue from 'vue';

import router from 'vue-router'; /* 导入路由 */

import login from '../views/login'; /* 导入其他组件 */

import content from '../components/content';

Vue.use(router)

定义组件路由

/* 定义组件路由 */

var rout = new router({

        routes: [

        {

                path: '/index',

                name: 'index',

                component: index

        },

        {

                path: '/content',

                component: content

        }

        ]

});

// 导出路由对象

export default rout;

这里我创建了三个vue文件，因此导入Index、Login、Reg三个组件

import Vue from 'vue';
/* 导入路由 */
import router from 'vue-router';
import Index from '../Index.vue';
import Login from '../Login.vue';
import Reg from '../Reg.vue';Vue.use(router)
/* 定义组件路由 */
var rout = new router({
routes: [{path: '/',component: Index},
{path: '/index',component: Index},
{path: '/login',component: Login},
{path: '/reg',component: Reg}]
});
export default rout

3.使用路由

这里由于浏览器每次默认先启动Index.vue文件，所以我们将其放在Index.vue文件中

<router-link to="/index"> 首页 </router-link>

<router-link to="/content"> 内容 </router-link>

<router-view/>

这里展示一个vue文件的基本格式，顺便在其中使用路由

<template><!-- 组件模版格式	组件中必须有一个根标签 --><div>首页<router-link to="/login">登录</router-link><router-link to="/reg">注册</router-link>{{name}} {{age}}</div>
</template><script>export default{//定义组件中的数据data(){return{name:'jim',age:20}},methods:{}}
</script><style>
</style>

4.在main.js中配置路由

import router from './router/index.js'

Vue.use(router);

new Vue({

        el: '#app',

        router,

        render: h => h(App)

})

创建完成后如下：

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false
//导入组件路由
import router from './router/index.js'
Vue.use(router);new Vue({el: '#app',router,render: h => h(App),
}).$mount('#app')

记得在App.vue的<template>标签中的div中添加如下标签，用于显示其他组件

<router-view></router-view>

App.vue完整代码如下：

<template><div id="app"><!-- <img alt="Vue logo" src="./assets/logo.png"> --><!-- 显示其他组件--><router-view></router-view></div>
</template>
<script>
export default {name: 'app',
}
</script><style></style>

最终效果如下：点击登录、注册可以访问到相应页面：