脚手架搭建vue框架

一、 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 文件

配置完成后记得把项目重新启动