WEB前端学习
第一日:软件的安装和下载
1.百度搜索推荐使用webStorm前端神器进行开发,傻瓜式安装不必多说!
激活 前提:修改本地的hosts配置文件(/etc/hosts) 最后一行新增这句话:0.0.0.0 account.jetbrains.com
然后去 http://idea.lanyus.com/ 这个网站生成一个激活码放在打开的activetion code里面即可
2.利用webstorm创建vue项目.vue主流前端框架.准备条件
(1).搭建Javascript运行环境node.js,安装完成node.js,npm也就安装完成了
(2).安装模块命令:
安装express模块: npm install express -g;
安装 weex国内镜像: npm install -g cnpm --registry=https://registry.npm.taobao.org; cnpm install -g weex-toolkit;
安装webpack: npm install webpack -g ;
安装Autoprefixer npm install autoprefixer -g #--自动补全代码
安装postcss-cli npm install postcss-cli -g #--自动补全代码
安装axios并引入:npm install axios -S #支持ajax请求
安装 vue-cli脚手架:npm install vue-cli -g # -g是全局安装的意思
(3).安装Git
3.进入项目目录初始化vue项目 vue init webpack 项目名字<项目名字不能用中文>
Target directory exists. Continue? (Y/n) 直接回车默认(然后会下载 vue2.0模板,这里可能需要连代理)
Project name (vue-test) 直接回车默认
Project description (A Vue.js project) 直接回车默认
Author 直接回车默认
Use ESLint to lint your code? n
pick an eslint preset. 默认Standard
setup unit tests with karma + mocha?No(单元测试不需要)
setup e2e tests with Nightwatch?No(单元测试不需要)
4.进入项目目录:
npm install 初始化安装依赖
npm run dev 执行 选中http://localhost:8080,鼠标右键复制,在浏览器打开。看到欢迎页面。
npm run build 打包发布项目
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录,包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src |
这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
|
| static | 静态资源目录,如图片、字体等。 |
| test | 初始测试目录,可删除 |
| .xxxx文件 | 这些是一些配置文件,包括语法配置,git配置等。 |
| index.html | 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档,markdown 格式 |
WEB前端学习的更多相关文章
- 每天成长一点---WEB前端学习入门笔记
WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...
- 【web前端学习部落22群】分享 碰撞的小球开源小案例
对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...
- web前端学习部落22群开源分享 左边菜单导航
有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...
- 【前端】Web前端学习笔记【2】
[2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...
- 立方体旋转 【web前端学习部落22群120342833】
效果: HTML部分: <body class="body"> <div class="rect-wrap"> <!-- // ...
- 【前端】Web前端学习笔记【1】
... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...
- Web前端学习笔记(001)
....编号 ........类别 ............条目 ................明细....................时间 一.Web前端学习笔记 ...
- 2015 WEB前端学习路线图
2015 WEB前端学习路线图,欢迎小伙伴补充 @落雨
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- web前端学习笔记
web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...
随机推荐
- css3 & background & background-image
css3 & background & background-image https://developer.mozilla.org/en-US/docs/Web/CSS/backgr ...
- SBT 模板不完全总结,后续待填
; ; ; ; ){ ; &&k<T[r].key)||(T[r].right==&&k>T[r].key)){ ); } ...
- es6异步编程 Promise 讲解 --------各个优点缺点总结
//引入模块 let fs=require('fs'); //异步读文件方法,但是同步执行 function read(url) { //new Promise 需要传入一个executor 执行器 ...
- springData Jpa 快速入门
前言: 数据持久化的操作,一般都要由我们自己一步步的去编程实现,mybatis通过我们编写xml实现,hibernate也要配置对应的xml然后通过创建session执行crud操作.那么有没有这样一 ...
- [bzoj1207][HNOI2004]打鼹鼠_动态规划
打鼹鼠 bzoj-1207 HNOI-2004 题目大意:题目链接. 注释:略. 想法: $dp_i$表示打到了第$i$个鼹鼠时最多打了多少个鼹鼠. $O(n)$转移即可. 总时间复杂度$O(n^2) ...
- 应用CLR的线程池
大家都知道这个线程的建立和销毁都需要很大的性能开销,当有比较多且不同的任务需要完成时,可以考虑使用线程池来管理这些线程.在以windows NT为内核的操作系统上每个进程都包含一个线程池,在线程池中存 ...
- AndroidStudio NDK开发、调试测试工程
## 验证内容:1.支持NDK调试 2.支持native方法快速创建jni封装(但是没有加入extern "C"声明,会导致native方法找不到jni,进而报错) 3.支持通过修 ...
- RelativeLayout不能居中的解决的方法
在LinearLayout中有个让元素居中的办法就是.比方在LinearLayout里有个TextView.设置TextView的gravity能够让其居中. 而在Realative里设置这个不起作用 ...
- NPOI2.2.0.0实例详解(十)—设置EXCEL单元格【文本格式】 NPOI 单元格 格式设为文本 HSSFDataFormat
NPOI2.2.0.0实例详解(十)—设置EXCEL单元格[文本格式] 2015年12月10日 09:55:17 阅读数:3150 using System; using System.Collect ...
- Cookies 初识 Dotnetspider EF 6.x、EF Core实现dynamic动态查询和EF Core注入多个上下文实例池你知道有什么问题? EntityFramework Core 运行dotnet ef命令迁移背后本质是什么?(EF Core迁移原理)
Cookies 1.创建HttpCookies Cookie=new HttpCookies("CookieName");2.添加内容Cookie.Values.Add(&qu ...