vue 入门教程1

vue3.5.5

1.npm install -g @vue/cli 全局安装vue3.5

 

2.vue create admin  创建admin项目，不可以大写

 

3.cd admin

 

4.npm install 

 

5.npm run serve 启动项目

 

6.安装 vue-router

npm install vue-router

 

7.建立router.js 文件

 

8.main.js 引入router.js

 

9.router 登录，钩子函数

 

10。vue_cookie

 

npm install vue-cookie --save

 

11.登录router钩子函数

https://segmentfault.com/a/1190000008383094 

 

12.element引入

vue add element,需要输入一些东西

13.安装后，会覆盖原来的App.vue内容，选用重新输入。

 

14.重定向

routes: [

    {

        path:'/',

        redirect:{name:"Login"}

        },  // 重定向到主页

 

}

15.登录

https://blog.csdn.net/sps900608/article/details/79502171

 

 

 

16.axios

npm install --save axios vue-axios

https://www.npmjs.com/package/vue-axios

 

17.axios跨域

根目录下，新建vue.config.js

module.exports = {

    devServer: {

        // 设置代理

        proxy: {

            "/api": {

                target: "http://www.haitunhaigou.cn", // 访问数据的计算机域名

                ws: true, // 是否启用websockets

                changOrigin: true, //开启代理

                logLevel: 'debug',

                pathRewrite: {

                    '^/api': 'http://www.haitunhaigou.cn'

                }

            }

        }

    }

};

 

调用格式

axios.get('/api/blog', {

  params: {

    ID: 12345

  }

})

    .then(function (response) {

      console.log(response);

    })

    .catch(function (error) {

      console.log(error);

    });

 

18.axios同步

https://segmentfault.com/q/1010000015962729?utm_source=tag-newest

methods: {

    async login () {

 

        var res =  await  this.$http.get('/api/blog', {

            params: {

                ID: 12345

            }

        });

        console.log('--',res);

 

19.vuex

https://www.cnblogs.com/moqiutao/p/10026723.html  首次1小时差不多

1.npm install vuex --save