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,引入进来,倒进来直接用
最新文章
- C#进阶系列——WebApi 接口返回值不困惑:返回值类型详解
- qq空间返回顶部代码
- EF事务嵌套
- SQL Server 数据库新建用户
- 《Unix网络编程》卷一(简介TCP/IP、基础套接字编程)
- java ConcurrentModificationException探究
- leetcode 19
- eclipse bookmark的使用
- (转) 读取xml文件转成List<;T>;对象的两种方法
- JQuery事件处理的注意事项
- CodeForces 1
- Entity Framework CodeFirst------数据迁移(二)
- n阶行列式计算----c语言实现(完结)
- 【JavaWeb】Session(转)
- git常见操作和常见错误
- [原创]一种基于Python爬虫和Lucene检索的垂直搜索引擎的实现方法介绍
- Windows下安装虚拟机和Linux
- HTTP 权威指南 详解 ( 一、概述 )
- wpf-x命名空间-Markup Extension(标记扩展)
- Spring的IOC/DI使用到的技术
热门文章
- cs231n spring 2017 lecture9 CNN Architectures
- keep pace with |sixes and sevens.|Three dozen of |setting out|in despite of|appetite for|brought up|.turn to|leave behind|As can be seen|every
- CF-1117C-Magic Ship
- iOS(Swift)学习笔记之去除UINavigationBar下方横线
- Android的HttpClient调用,冲突的解决办法
- VRRP笔记二:配置keepalived为实现haproxy高可用的配置文件示例
- vm文件的优点
- Css兼容性大全
- __filename意思
- kNN算法 Demo