一、 node安装
1）如果不确定自己是否安装了node,可以在命令行工具内执行： node -v （检查一下 版本）；
2）如果 执行结果显示： xx 不是内部命令，说明你还没有安装node , node 安装地址：http://nodejs.cn/download/
注 ：安装 vue-cli 脚手架目前需要node版本为 v4.0 以上；
第一步: 用脚手架搭建项目 :
1). npm install --global vue-cli
2). vue init webpack my-project
Project name 项目名称(enter)
Porject description 项目描述(enter)
Author (enter)
Install vue-router 是否按照vue路由(y)
use eslint ... 是否使用eslint检查你的代码(n)
set up unit tests.... 测试(n)
set up e2e... 测试(n)
yes use NPM... (enter)
按上面提示 编辑 安装要一小会 , 稍等..... 好了 ,安装完成 ,继续执行快捷命令让浏览器打开页面 npm run dev
项目安装成功 , 接下来就是配置文件啦 重新打开那个文件夹在这个项目文件夹里面打开命令窗口 ,因为这样方便我们安装路由 router
1.安装路由 : npm install vue-router --save-dev
2 . 在src里面创建必备的文件夹来放我们要用的代码 前期工作很重要哦 , <assets>(用来放一些样式和移动端的re什么的) <components>放一些公共组件 , 比如一些网站的首页导航部分啦 <pages>里面就是
我们要放对应的页面一些页面内容 里面也要对应的放好 ,这个是根目录 ,根目录里面放的是个个页面的模块 < router>!!!路由配置很重要哦 , 里面规定了页面的跳转 ,页面的配置.页面根路由和子路由的配置 <utils> 放请求数据的封装方法 ,暂时五个文件夹啦.接下来就是文件夹的里面内容的配置.
3 路由配置 App.vue里面是要显示的页面内容 ,显示那部分 ,
App.vue部分是整个项目的布局 , 容器 , 项目的结构都在这里 , 大致是这样的 头部 ---内容---底部
<template>
<div id="app"> <!--只能用一个div包裹,不能多个元素并挂出现,不然会报错-->
<Header></Header> <!--这个是首页导航栏-->
<router-view></router-view> <!--整个页面的内容就在这里显示出来-->
</div>
</template>
<script>
import Header from '@/components/Header'; //这个引入组件 Header是引入组件的名字 from是引入组建的地址
export default {
components: { //注册组件 ,这样他就可以以标签的形式来使用展示到页面
Header //注册组件的名字
}
};
</script>
<style lang="less">
@import './assets/styles/reset.css'; /*引入样式*/
@import './assets/styles/common.less'; /*引入样式*/
body {
background-color: #ebebeb;
}
</style>
4 . 路由的配置
//加载Vue,vue-router import Vue from 'vue' //在node_modules里面找 import Router from 'vue-router' //在node_modules里面找 //使用router 运行命令 Vue.use(Router); // import Index from '/@/pages/home/index' import Index from '@/pages/home' //找到home下面的页面 import Film from '@/pages/film/index' //配置路由找到对应的页面 import Demo from '@/components/demo'//这个是用来测试的demo import NowPlaying from '@/pages/film/children/now-playing' import ComingSoon from '@/pages/film/children/coming-soon' //配置路由 const router = new Router({ routes: [ //配置首页 { path:'/', //根路由 name:'index', //路由地址 component:Index //这个路由地址对应的那个页面 }, { path:'/demo', //要跳转的页面 name:'demo', //路由地址 component:Demo //这个路由地址对应的那个页面 }, { path:'/film', //要跳转的页面 name:'film', //路由地址 component:Film, //跳到这个路由对应的那个页面 //配置他的子路由 ,这样就可以通过父路由跳到子路由 children : [ //子路由的文件夹 { path:'now-playing', //要跳转的页面地址 name:'now-playing', //路由的名称 component:NowPlaying //这个路由地址对应的那个页面 }, { path:'coming-soon', //要跳转的页面地址 name:'coming-soon', //路由的名称 component:ComingSoon //通过父路由跳转到子路由的名字 } ] } ] }); //导入 export default router; //
配置完路由 , 在mian.js 里面加入一条
引入js文件和注册组件
配置跨域,在config文件里找到index.js 文件
配置完成后记得把项目重新启动
