创建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命令的,所以 ...
随机推荐
- hdu2081
#include <stdio.h> #include <malloc.h> int main(){ ]; char *p; int t; p=(); scanf(" ...
- 【bzoj3489】A simple rmq problem 三维KD-tree
题目描述 因为是OJ上的题,就简单点好了.给出一个长度为n的序列,给出M个询问:在[l,r]之间找到一个在这个区间里只出现过一次的数,并且要求找的这个数尽可能大.如果找不到这样的数,则直接输出0.我会 ...
- 浅谈Oracle数据库分区表
Oracle数据库分区是作为Oracle数据库性能优化的一种重要的手段和方法,之前,只听过分区的大名,却总未用过,最近简单学习了一下,总结如下,不对之处,还希望朋友们多多指点,交流! 1.表空间及分区 ...
- 【kmp+求所有公共前后缀长度】poj 2752 Seek the Name, Seek the Fame
http://poj.org/problem?id=2752 [题意] 给定一个字符串,求这个字符串的所有公共前后缀的长度,按从小到达输出 [思路] 利用kmp的next数组,最后加上这个字符串本身 ...
- request.getContextPath是为了解决相对路径的问题,可返回站点的根路径
假定你的web application 名称为news,你在浏览器中输入请求路径: http://localhost:8080/news/main/list.jsp 则执行下面向行代码后打印出如下结果 ...
- linux文件夹作用
linux下的文件结构,看看每个文件夹都是干吗用的/bin 二进制可执行命令 /dev 设备特殊文件 /etc 系统管理和配置文件 /etc/rc.d 启动的配置文件和脚本 /home 用户主目录的基 ...
- Linux(15):shell 编程
shell基础 什么是 shell ? Shell是一个命令解释器,它的作用是解释执行用户输入的命令及程序等,用户输入一条命令, Shell 就解释执行一条. 这种从键盘一输入命令,就可以立即得到回应 ...
- AC日记——A+B Problem(再升级) 洛谷 P1832
题目背景 ·题目名称是吸引你点进来的 ·实际上该题还是很水的 题目描述 ·1+1=? 显然是2 ·a+b=? 1001回看不谢 ·哥德巴赫猜想 似乎已呈泛滥趋势 ·以上纯属个人吐槽 ·给定一个正整数n ...
- Hadoop HDFS 常用命名
HDFS命令基本格式:hadoop fs -cmd < args > ls 命令hadoop fs -ls / 列出hdfs文件系统根目录下的目录和文件 hadoop fs -ls -R ...
- mysql 5.7版本目录无data文件夹的解决办法
安装mysql 5.7+版本时,若发现因根目录下,缺少data文件夹的情况, ***请不要去拷贝其他版本的data文件夹!*** 因为此操作会出现很多潜在问题:比如我遇到的执行show variabl ...