创建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项目的步骤的更多相关文章
- Vue2+Webpack创建vue项目
相比较AngularJS和ReactJS,VueJS一直以轻量级,易上手称道.MVVM的开发模式也使前端从原先的DOM中解放出来,我们在不需要在维护视图和数据的统一上花大量时间,只需要关注于data的 ...
- VUE,基于vue-cli搭建创建vue项目
前提:必须安装node.js,官方地址:https://nodejs.org/en/ 然后安装vue-cli 安装方式:cmd命令行安装:打开cmd命令符输入进行全局安装脚手架:npm install ...
- 如何创建vue项目
Vue项目环境搭建 """ node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内 ...
- 命令行创建 vue 项目(仅用于 Vue 2.x 版本)
1 .安装 Node.js 和 npm ( 验证安装成功输入下图 1 命令行可得 2:输入命令行 3 可得 4 即安装成功) 2.安装全局 webpack (安装依照下图输入命令行 1 耐心等待至到出 ...
- vue — 创建vue项目
创建vue项目 在程序开发中,有三种方式创建vue项目,本地引入vuejs.使用cdn引入vuejs.使用vue-cli创建vue项目.其中vue-cli可以结合webpack打包工具使用,大大方便了 ...
- 《Asp.Net Core3 + Vue3入坑教程》 - Vue 1.使用vue-cli创建vue项目
简介 <Asp.Net Core3 + Vue3入坑教程> 此教程适合新手入门或者前后端分离尝试者.可以根据图文一步一步进操作编码也可以选择直接查看源码.每一篇文章都有对应的源码 目录 & ...
- 使用vue-cli创建vue项目
vue-cli是官方发布的vue.js项目脚手架工具,使用它可以快速创建vue项目,github地址:https://github.com/vuejs/vue-cli 1.安装vue-cli //设置 ...
- 通过脚手架创建Vue项目
第一步 准备工作 1.下载安装Node.js 验证是否安装的方法,在命令行输入node -v 2.安装Vue 在命令行输入npm install -g @vue/cli 查看Vue版本号 npm vu ...
- Linux下创建vue项目
前提:已经安装了node.js.cnpm 1.全局安装vue脚手架vue-cli:#cnpm install -g vue-cli 注意:全局安装没有建立软链接前是无法使用刚刚安装的vue命令的,所以 ...
随机推荐
- Android ScrollView嵌套GridView导致GridView只显示一行item
Android ScrollView嵌套GridView导致GridView只显示一行item Android ScrollView在嵌套GridView时候,会导致一个问题发生:GridView只显 ...
- HDU-4417 Super Mario,划分树+二分!
Super Mario 这个题也做了一天,思路是很清晰,不过二分那里写残了,然后又是无限RE.. 题意:就是查询区间不大于k的数的个数. 思路:裸划分树+二分答案.将区间长度作为二分范围.这个是重点. ...
- 九度oj 题目1173:查找
题目描述: 输入数组长度 n 输入数组 a[1...n] 输入查找个数m 输入查找数字b[1...m] 输出 YES or NO 查找有则YES 否则NO . 输入: 输入有多组数据. ...
- java.lang.NoClassDefFoundError: Could not initialize class sun.awt.X11GraphicsEnvironment问题解决
2018-09-29 17:45:16.905 ERROR [pool-1-thread-1]o.s.scheduling.support.TaskUtils$LoggingErrorHandler. ...
- 30分钟学会如何使用Shiro(转自:http://www.cnblogs.com/learnhow/p/5694876.html)
本篇内容大多总结自张开涛的<跟我学Shiro>原文地址:http://jinnianshilongnian.iteye.com/blog/2018936 我并没有全部看完,只是选择了一部分 ...
- sqlite-jdbc
sqlite-jdbc驱动下载 https://bitbucket.org/xerial/sqlite-jdbc/downloads import java.sql.*; public class T ...
- 【Hihocoder1034】毁灭者问题(splay,树状数组)
题意: 假设你拥有 n 个魔法单位,他们从左到有站在一行,编号从 1 到 n. 每个单位拥有三项属性: si: 初始法力. mi: 最大法力上限. ri: 每秒中法力回复速度. 现在你操纵一个毁灭者, ...
- Codeforces 514C Watto and Mechanism(字典树)
题目链接 Watto and Mechanism 题意 给出$n$个串(相当于字典),然后给出$m$个询问. 每个询问以字符串的形式给出,你需要改变这个字符串中的任意一个字符 (必须改变且只能改变 ...
- Spark学习(一) Spark初识
一.官网介绍 1.什么是Spark 官网地址:http://spark.apache.org/ Apache Spark™是用于大规模数据处理的统一分析引擎. 从右侧最后一条新闻看,Spark也用于A ...
- ByteArrayInputStream的作用,和BufferedOutputStream 的区别
个人好奇ByteArrayInputStream,到底是有什么用于是百度了一些资料 整合了下,********这两个类对于要创建临时性文件的程序以及网络数据的传输.数据压缩后的传输等可以提高运行的的效 ...