首页 > 代码库 > vue-cli脚手架
vue-cli脚手架
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‘
vue-cli脚手架
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。