vue-cli脚手架

Posted 2020-09-25

vue-cli脚手架

1 安装

    cnpm install vue-cli -g

2 初始化项目

    vue init webpack projectName

3 运行项目

    npm run dev
    修改端口运行
    PORT=8089 node ./build/dev-server.js

vue组件

1 在一个组件中使用另一个组件需要是哪个条件

使用import命令将该组件导入

在父组件中的components里面注册该导入的组件

在父组件中的template里面 使用组件标签调用

vue-router路由使用

1 安装vue-router

    cnpm install vue-router --save-dev

2 在main.js中 导入并使用vue-router

    import VRouter from ‘vue-router‘
    //使用
    Vue.use(VRouter)

3 定义路由，注意，路由中涉及到的相关组件需要提前用import 载入

    import Home from ‘@/page/home‘
    import News from ‘@/page/news‘
    let router = new VRouter({
        routes:[
            {path:‘/home‘,component:Home},
            {path:‘/news‘,component:News}
        ]
    })

4 在根组件中加入 配好的 router

        new Vue({
          el: ‘#app‘,
          router,
          template: ‘<App/>‘,
          components: { App }
        })

5

        在跟组件中 App.vue中 加入<router-view></router-view>，确定显示区域

6 在浏览器访问如下路径测试

        localhost:8080/#/home
        localhost:8080/#/news

7 路由改造 route/index.js

        import Vue from ‘vue‘
        //路由相关
        //载入vue-router
        import VRouter from ‘vue-router‘
        //使用
        Vue.use(VRouter)
        //导入模块
        import Home from ‘@/page/home‘
        import News from ‘@/page/news‘

        export default new VRouter({
            routes:[
                {path:‘/home‘,component:Home},
                {path:‘/news‘,component:News}
            ]
        })

        main.js

        import router from ‘@/route/index‘