作者

1、在基于node环境的laragon集成环境中,终端任意目录执行命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install -g @vue/cli

vue ui

注意:如果你电脑是第一次创建vue项目,上面命令启动后,会自动从浏览器中打开新建项目页面。

如果你电脑之前已经安装过vue的项目,执行上面的命令后,浏览器会自动打开一个项目仪表盘的管理页面。

点击左上角的按钮,选择 Vue项目管理器

点击创建

选择项目路径

点击底下的创建项目,进入如下图片

选择手动

选择第一项和第四项

勾上history router

接下来,把准备好的项目模板拿进来,样式放入public文件夹,首页模板覆盖之前的index.html。浏览器就能看到样式了。

然后把footer组件拿到components里面,需要用的页面引入即可。例如在Home.vue里面,做如下引入

<script>
import Footer from '@/components/Footer.vue'

export default {
  name: 'home',
  components: {
    Footer
  }
}
</script>

然后在该页面上对应位置就可以这样使用 <Footer/>

这只是一种搞法,其实还可以全局引入。在main.js中,

import Footer from '@/components/Footer.vue'

Vue.component('my-footer', Footer);

然后在该页面上对应位置就可以这样使用 <my-footer/>

接下来,安装axios,进入项目目录,执行命令

cnpm i axios -S

引入axios,在main.js中添加如下代码

import axios from 'axios'

Vue.prototype.axios = axios;

配置访问的url接口链接地址,在项目目录中创建.env文件,里面写上如下代码:

VUE_APP_URL=http://127.0.0.1:8000

然后在src文件夹中创建http.js文件,里面添加如下代码:

import axios from 'axios'

axios.defaults.baseURL = process.env.VUE_APP_URL;      //获取.env配置的URL地址

export default axios;

修改axios.js中的代码:

把这行import axios from 'axios' 替换成  import axios from '.http.js'

router.js中的路由推荐使用懒加载模式,示例如下:

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('./views/Home.vue')
    },
    {
      path: '/product/category',
      name: 'category',
      component: () => import('./views/product/Category.vue')
    },
    {
      path: '/product/list/:id',
      name: 'list',
      component: () => import('./views/product/List.vue')
    },
    {
      path: '/product/:id',
      name: 'show',
      component: () => import('./views/product/Show.vue')
    },
    {
      path: '/cart/index',
      name: 'index',
      component: () => import('./views/cart/Index.vue')
    },
  ]
})

修改Home.vue组件里面的script代码如下:

<script>
    export default {
        data() {
            return {
                data: {}
            }
        },
        //初始化
        created() {
            this.init();
        },
        updated() {
            $('.flexslider').flexslider({
                animation: "slide",
                directionNav: false
            });
        },
        methods: {
            init: function () {
                this.axios.get(`/api`).then((res) => {
                    // console.log(res)
                    this.data = res.data
                })
            }
        }
    }
</script>

转载请注明,来自https://itfun.tv/news/156