第一步:

  对于要创建项目的工作目录,要先进性管理,命令: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项目的步骤的更多相关文章

  1. Vue2+Webpack创建vue项目

    相比较AngularJS和ReactJS,VueJS一直以轻量级,易上手称道.MVVM的开发模式也使前端从原先的DOM中解放出来,我们在不需要在维护视图和数据的统一上花大量时间,只需要关注于data的 ...

  2. VUE,基于vue-cli搭建创建vue项目

    前提:必须安装node.js,官方地址:https://nodejs.org/en/ 然后安装vue-cli 安装方式:cmd命令行安装:打开cmd命令符输入进行全局安装脚手架:npm install ...

  3. 如何创建vue项目

    Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...

  4. 命令行创建 vue 项目(仅用于 Vue 2.x 版本)

    1 .安装 Node.js 和 npm ( 验证安装成功输入下图 1 命令行可得 2:输入命令行 3 可得 4 即安装成功) 2.安装全局 webpack (安装依照下图输入命令行 1 耐心等待至到出 ...

  5. vue — 创建vue项目

    创建vue项目 在程序开发中,有三种方式创建vue项目,本地引入vuejs.使用cdn引入vuejs.使用vue-cli创建vue项目.其中vue-cli可以结合webpack打包工具使用,大大方便了 ...

  6. 《Asp.Net Core3 + Vue3入坑教程》 - Vue 1.使用vue-cli创建vue项目

    简介 <Asp.Net Core3 + Vue3入坑教程> 此教程适合新手入门或者前后端分离尝试者.可以根据图文一步一步进操作编码也可以选择直接查看源码.每一篇文章都有对应的源码 目录 & ...

  7. 使用vue-cli创建vue项目

    vue-cli是官方发布的vue.js项目脚手架工具,使用它可以快速创建vue项目,github地址:https://github.com/vuejs/vue-cli 1.安装vue-cli //设置 ...

  8. 通过脚手架创建Vue项目

    第一步 准备工作 1.下载安装Node.js 验证是否安装的方法,在命令行输入node -v 2.安装Vue 在命令行输入npm install -g @vue/cli 查看Vue版本号 npm vu ...

  9. Linux下创建vue项目

    前提:已经安装了node.js.cnpm 1.全局安装vue脚手架vue-cli:#cnpm install -g vue-cli 注意:全局安装没有建立软链接前是无法使用刚刚安装的vue命令的,所以 ...

随机推荐

  1. [android开发篇]安装android sdk的时候请注意

    第二就是: 如果要国内镜像的话: 3.大连东软信息学院镜像服务器地址: http://mirrors.neusoft.edu.cn  端口:80 随便选择一个就行啦.这里我选择的是第三个站点,即大连东 ...

  2. 此坑待填 离散化思想和凸包 UVA - 10173 Smallest Bounding Rectangle

    Smallest Bounding Rectangle Given the Cartesian coordinates of n(>0)2-dimensional points, write a ...

  3. Linux(10):期中架构(2)--- NFS存储服务 & 实时同步

    1. 共享存储服务概念: # NFS是Network File System的缩写,中文意思是网络文件系统, # 它的主要功能是通过网络(一般是局域网)让不同的主机系统之间可以共享文件或目录. 2. ...

  4. 理解 virbr0

    virbr0 是 KVM 默认创建的一个 Bridge,其作用是为连接其上的虚机网卡提供 NAT 访问外网的功能. virbr0 默认分配了一个IP 192.168.122.1,并为连接其上的其他虚拟 ...

  5. Tarjan 算法 自学整理

    算法介绍 如果两个顶点可以相互通达,则称两个顶点强连通(strongly connected).如果有向图G的每两个顶点都强连通,称G是一个强连通图.非强连通图有向图的极大强连通子图,称为强连通分量( ...

  6. 【HDOJ5978】To begin or not to begin(概率)

    题意:有k个黑球和1个红球,两个轮流抽,抽到红球算赢,问先手赢的概率大还是后手大还是相等 k<=1e5 思路:手算前几项概率 大胆猜想 #include<cstdio> #inclu ...

  7. XPath中的轴

    这个博客中有一系列的例子,不仅有child的例子:http://www.cnblogs.com/zhaozhan/archive/2009/09/10/1563723.html XPath 是一门在 ...

  8. Yii2之创建定时任务

    yii开发的项目需要使用定时任务其实也可以使用一些单独的脚本文件来完成,但若是定时任务代码中需要使用到项目中的一些类,特别是需要使用应用对象Yii::$app的时候,单独的脚本想要完成就比较麻烦了.这 ...

  9. Android 之 下拉框(Spinner)的使用-转

    下拉列表 Spinner. Spinner的使用,可以极大提高用户的体验性.当需要用户选择的时候,可以提供一个下拉列表将所有可选的项列出来.供用户选择. Demo如下,可以留作参考 一.使用数组作为数 ...

  10. WEB学习-CSS基础选择器

    基础选择器 标签选择器 就是标签的名字. • <h1>前端与移动开发<span>1期班</span>基础班</h1> css: • <style ...