创建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命令的,所以 ...
随机推荐
- 更新yum源导致yum不可用
当安装和yum配置相关的包后报yum模块找不到 yum install -y yum-utils device-mapper-persistent-data lvm2 yum list|grep yu ...
- nginx的详解(四)
10.nginx的访问控制及DDOS预防1)访问控制配置基于各种原因,Ningx有时要进行访问控制.比如说,一般网站的后台都不能让外部访问,所以要添加 IP 限制,通常只允许公司的IP访问.访问控制就 ...
- [BZOJ1663] [Usaco2006 Open]赶集(spfa最长路)
传送门 按照时间t排序 如果 t[i] + map[i][j] <= t[j],就在i和j之间连一条边 然后spfa找最长路 #include <queue> #include &l ...
- 洛谷P2498 [SDOI2012]拯救小云公主 【二分 + 并查集】
题目 英雄又即将踏上拯救公主的道路-- 这次的拯救目标是--爱和正义的小云公主. 英雄来到boss的洞穴门口,他一下子就懵了,因为面前不只是一只boss,而是上千只boss.当英雄意识到自己还是等级1 ...
- 济南学习 Day 5 T2 am
車(Rook) [题目描述] 众所周知,車是中国象棋最厉害的棋子之一,他能吃到同一行或者同一列的其他棋子.車显然不能和車在一打起来,于是rly有借来了许多许多車在棋盘上摆了起来...... 他想知道, ...
- msp430项目编程36
msp430中项目---sd接口编程36 1.电路工作原理 2.代码(显示部分) 3.代码(功能实现) 4.项目总结
- golang-uuid
uuid第三方库可以在github上找,我在这使用的是:github.com/satori/go.uuid PS:不知道哪里原因,使用go mod 管理包,下载的包和github上的不是完全一样,也特 ...
- hdu 4883
简单题,当时竟然没有敲出来╮(╯▽╰)╭... 方法:每个时间点排序从小到大排序,之后扫一遍即可:是进的时间点就加人,反之出人.更新最大值即可....囧... #include<iostream ...
- POJ 3080 多个串最长公共子序列
求多个串最长公共子序列,字典序最小输出.枚举剪枝+kmp.比较简单,我用find直接查找16ms #include<iostream> #include<string> #in ...
- MySQL的LOOP, LEAVE 和ITERATE语句(类似Continue、Break的写法)
和REPEAT和while语句不同,LOOP.LEAVE.ITERATE更像其他编程语言中的goto语句. LOOP要设定一个label指定循环的开始位置,而LEAVE则像其他语言中的Break会离开 ...