码迷,mamicode.com
首页 > 其他好文 > 详细

创建Vue项目的步骤

时间:2018-11-15 17:10:14      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:class   部分   vue   初始   定义   工作   管理   组件   页面   

第一步:

  对于要创建项目的工作目录,要先进性管理,命令:npm init -y

第二步:

  初始化webpack 包,命令:vue init webpack 自定义名称

第三步:

  在components 文件中创建组件。在创建组件时要对页面布局进行一个规划,可以分为头部,底部,内容三部分。在各个部分定义组件

第四步:

  在src中的router 文件中的index.js中导入components 中的子组件。

第五步:

  在src中的main.js中导入elementui

  命令:import ElementUI from ‘element-ui‘

       import ‘element-ui/lib/theme-chalk/index.css‘

      Vue.use(ElementUI)

第六步:

  在APP中导入components中的大方向组件(My_Header,My_Footer),并注册这两个组建

  命令:

  

export default {
  name: App,
  components:{
    MyHeader,
    MyFooter

  }
}

  然后在template中使用

<template>
  <div id="app">
    <MyHeader></MyHeader>                      
    <router-view class="content"></router-view>   # 中间是router-link的内容
    <MyFooter></MyFooter>

  </div>
</template>

 

创建Vue项目的步骤

标签:class   部分   vue   初始   定义   工作   管理   组件   页面   

原文地址:https://www.cnblogs.com/wf123/p/9964295.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!