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: '
      ',          components: { App }        })

5

在跟组件中 App.vue中 加入
      ，确定显示区域

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'