• vue-cil搭建项目

            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三个组件

    1. import Vue from 'vue';
    2. /* 导入路由 */
    3. import router from 'vue-router';
    4. import Index from '../Index.vue';
    5. import Login from '../Login.vue';
    6. import Reg from '../Reg.vue';
    7.  
    8. Vue.use(router)
    9. /* 定义组件路由 */
    10. var rout = new router({
    11. routes: [
    12. 	{
    13. 	path: '/',
    14. 	component: Index
    15. 	},
    16. {
    17. 	path: '/index',
    18. 	component: Index
    19. 	},
    20. {
    21. 	path: '/login',
    22. 	component: Login
    23. 	},
    24. {
    25. 	path: '/reg',
    26. 	component: Reg
    27. 	}
    28. 		]
    29. });
    30. export default rout

    3.使用路由

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

    首页
    内容

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

    2.  
    3. <script>
    4. 	export default{
    5. 		//定义组件中的数据
    6. 		data(){
    7. 			return{
    8. 				name:'jim',
    9. 				age:20
    10. 			}
    11. 		},
    12. 		methods:{
    13. 			
    14. 		}
    15. 	}
    16. script>
    17.  
    18. <style>
    19. style>

    4.在main.js中配置路由

    import router from './router/index.js'
    Vue.use(router);
    new Vue({
            el: '#app',
            router,
            render: h => h(App)
    })

            创建完成后如下：

    1. import Vue from 'vue'
    2. import App from './App.vue'
    3.  
    4. Vue.config.productionTip = false
    5. //导入组件路由
    6. import router from './router/index.js'
    7. Vue.use(router);
    8.  
    9. new Vue({
    10. 	el: '#app',
    11. 	router,
    12.   render: h => h(App),
    13. }).$mount('#app')

    记得在App.vue的