创建Vue项目的步骤

Posted 2021-01-20 wf123

第一步：

　　对于要创建项目的工作目录，要先进性管理，命令：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>