vue项目基本步骤
首先查看电脑是否已经安装vue并查看版本:
window+R快捷打开命令行,cmd,输入node -v回车
如果未安装操作步骤如下:
1:$ cnpm install vue(新电脑安装Vue,永久)
2:$ npm install --global vue-cli(安装vue-cli脚手架构建工具,永久)
3:$ vue init webpack my-project(初始化Vue,创建一个基于 webpack 模板的新项目)
4:回车,填写y/n (ESLint要选择n,其他全部y);
5:$ cnpm install(安装项目所需要的依赖,也许会自动安装,可省略)
6:(cd 文件夹名称)+本地运行项目npm run dev(查看readme里面步骤)
7:打包npm run build(项目完成发布时候才运行)
项目开始步骤:
1:src-compoents(组件文件夹)-创建页面.vue
2:assets放公共静态css/js/image/等资源
3:router:配置路由(唯一一个路由文件)
ctrl+alt+d注释
突出显示匹配标签标记,安装vincaslt
中文:安装language packs插件后,Ctrl+shift+p,输入language文件找到locale.json更改配置en>zh-cn
vue着手开始之大白话
1:首先打开app.vue.盛放最大的框架 <router-view/>一个跳转的路由,相当于这一块界面是可以替换的2:进入index.vue主页面,开始布局, <Header></Header>是固定的所以直接这样写。
<keep-alive>
<router-view></router-view>
</keep-alive>
这中间是变化的,所以这样写。
3:开始写局部里面的小版块了。可以看头部是静态不变的,所以用header标签写起来,点击不同的tab切换不同的页面(路由)
4:点击tab时候切换的页面有2种布局。
(1):只有一个整体的页面
(2):页面分为左右2个部分。这个时候发现左边是静态的,右边是动态的。所以在这个页面将动态的又封装起来,点击左边菜单切换路由。
其中以el标签的是引用模块化elementUI,引用他的样式和方法
一般就elementUI和IVew,引入进来,倒进来直接用
vue项目基本步骤的更多相关文章
- windows下vue项目启动步骤
原创:https://blog.csdn.net/qq_27680317/article/details/71123051?locationNum=10&fps=1 不是ngnix服务器是,忽 ...
- 详细记录vue项目实战步骤(含vue-cli脚手架)
一.通过vue-cli创建了一个demo. (vue-cli是快速构建这个单页应用的脚手架,本身继承了多种项目模板:webpack(含eslit,unit)和webpack-simple(无eslin ...
- vue-cli安装以及搭建vue项目详细步骤
vue init webpack projectname(projectname是你项目的名称) 创建项目卡住不动解决方案: https://cli.vuejs.org/zh/guide/instal ...
- vue项目创建步骤 和 路由router知识点
菜单快捷导航: vue项目创建 vue路由router知识点(路径参数.查询参数.命名路由.嵌套路由.命名视图.hash/history模式) 1.创建一个vue项目步骤 (windows环境下).创 ...
- 如何搭建一个vue项目(完整步骤)
参考资料 一.安装node环境 1.下载地址为:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功 3.为了提高我们的效率,可以使用淘宝的 ...
- window10下启动vue项目具体步骤
1. 安装nodejs 直接去nodejs官方网站下载安装包(https://nodejs.org/zh-cn/) 然后在cmd窗口里面输入 node -v 可以检测出来nodejs是否在全局环境下安 ...
- 搭建vue项目的步骤
新建vue脚手架 vue-element-cms步骤: 1. vue create ……………(文件名)---这里取为vue-element-cms 2. 命令行工具进入这个文件夹,安装路由依赖包 n ...
- vue 项目搭建步骤
环境搭建步骤: 打开git ,运行 npm install --global vue-cli 这是安装vue的命令行 vue init webpack vue-demo 这是vue基于webpack的 ...
- vue项目初始化步骤
项目初始化:() 1. 安装vue-cli : npm install -g vue-cli 2.初始化项目: vue init webpack my-project 3.进入项目: c ...
随机推荐
- BadRequestException
package me.zhengjie.common.exception; import lombok.Getter; import org.springframework.http.HttpStat ...
- LeetCode No.67,68,69
No.67 AddBinary 二进制求和 题目 给定两个二进制字符串,返回他们的和(用二进制表示). 输入为非空字符串且只包含数字 1 和 0. 示例 输入: a = "11", ...
- 用go写爬虫服务并发请求,限制并发数
java写爬虫服务,思路是线程池,任务队列,限制并行线程数即可. go要用另一种设计思路,不能在线程层面限制,协程的异步请求,如果不作处理,并行发出所有网络请求,因网络请求数过多,会抛出异常 低版本的 ...
- HttpClient系统日志配置
详细介绍在:http://hc.apache.org/httpclient-3.x/logging.html 一般使用context logging基本够用,context logging解释原文如下 ...
- Django的乐观锁与悲观锁实现
1) 事务概念 一组mysql语句,要么执行,要么全不不执行. 2) mysql事务隔离级别 Read Committed(读取提交内容) 如果是Django2.0以下的版本,需要去修改到 ...
- undefined reference to 问题汇总及解决方法 ----- 还有一种问题没有解决(可能是顺序问题)
1.链接时缺失了相关的目标文件 2.链接时缺少了相关的库文件 3.链接的库文件中有使用了另一个库文件 4.多个库文件链接顺序问题 5.定义与实现不一致 6.在c++代码中链接C语言的库 转载地址: ...
- C语言学习笔记之字符串拼接的2种方法——strcat、sprintf
本文为原创文章,转载请标明出处 1. 使用strcat进行字符串拼接 #include <stdio.h> #include <stdlib.h> #include <s ...
- MySQL rand(随机数)、floor(保留整数)、char(ASCII 转字符)、concat(字符串连接)
一.MySQL的rand()函数 select rand(); rand()函数,随机0-1之间的数. 二.获得0-10之间的整数(包含0,不包含10) ; 其中floor()去掉小数. 三.获得指定 ...
- <USACO09FEB>庙会捷运Fair Shuttleの思路
一个没有被我成功证明的 贪心 但是 ac了的 别人排序都是排终点.但我的排终点错了emm排起点才对qvq 有没有人友情看看怎么证(没有 #include<cstdio> #include& ...
- Lego:美团点评接口自动化测试实践
概述 接口自动化概述 众所周知,接口自动化测试有着如下特点: 低投入,高产出. 比较容易实现自动化. 和UI自动化测试相比更加稳定. 如何做好一个接口自动化测试项目呢? 我认为,一个“好的”自动化 ...