vue从入门到出门。cli3搭建VUE访问自己的功能页面

1.cli3搭建vue项目。具体步骤按照原博主即可：cli3快速搭建vue

---- ---- ----

2.导入idea,执行npm install,下载所需要的依赖包

---- ---- ----

3.双击serve，注意不是dev，cli3搭建的vue项目启动方式不再是双击dev，访问启动地址，此时默认访问的是vue.app页面。

---- ---- ----

4.如果想启动项目后，默认访问自己开发的页面，关键步骤：

1.在App.vue中添加公共模块，如下图的footer、navmenu，在中间填上<router-view />引用路由页面：

---- ---- ----

2.在src下建立router包，router下新建index.js。删除根目录下的router.js文件，此时启动项目后，会自动扫描自己的router包，而不是根目录下的router.js文件了

---- ---- ----

3.配置启动后访问的页面，如下标记中，配置路由地址默认页面为page_list.vue，此时访问根目录时路由部分就是page_list.vue页面，公共部分是footer、navmenu


---- ---- ----

4.在导航栏里配置路由链接，点击改变路由页面，使用的两种方式，点击后路由模块变化，公共区域不变：
第一种，直接写地址，如下图1.2。第二种，写在方法里如3、4

---- ---- ----

5.点击左侧导航列表，从后台接口获取数据显示一个自己的table页面。两种方式：

方法一 在标签上直接绑定路由：
点击列表项，使用路由功能，代码如下：<router-link to="/userpage">用户列表</router-link>，此时/userpage就是你路由配置，和自定义主页方式一样

---- ---- ----

方法二 绑定事件：
添加路由地址
绑定点击事件

---- ---- ----

6.获取后台数据，要使用到proxy反向代理

1.在根目录下创建vue.config.js,粘贴如下代码

module.exports = {
    devServer: {
        publicPath: '/',
        port: 8383, // 端口号
        // 如果外网想ip访问 屏蔽掉host
        // host: 'localhost',
        https: false, // https:{type:Boolean}
        open: false, // 配置自动启动浏览器
        // proxy: 'http://localhost:3000' // 配置跨域处理,只有一个代理
        proxy: {
            '/api': {
                target: 'http://192.168.1.209:8763',
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '' // 通过pathRewrite重写地址，将前缀/api转为/
                }
            },
            '/foo': {
                target: '<other_url>'
            }
        } // 配置多个代理
    },
    assetsDir: 'static'
}

---- ---- ----

2.此时就可以使用let urlApi='/api'来获取到反向代理的地址，再加上自己具体的访问地址，就可拿到数据了

---- ---- ----

3.，然后使用element+vue渲染数据，就得到下面的页面