第一日:软件的安装和下载

  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

这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

  • assets: 放置一些图片,如logo等。
  • components: 目录里面放了一个组件文件,可以不用。
  • App.vue: 项目入口文件,我们也可以直接将组件写这里,而不使用 components 目录。
  • main.js: 项目的核心文件。
static 静态资源目录,如图片、字体等。
test 初始测试目录,可删除
.xxxx文件 这些是一些配置文件,包括语法配置,git配置等。
index.html 首页入口文件,你可以添加一些 meta 信息或统计代码啥的。
package.json 项目配置文件。
README.md 项目的说明文档,markdown 格式

WEB前端学习的更多相关文章

  1. 每天成长一点---WEB前端学习入门笔记

    WEB前端学习入门笔记 从今天开始,本人就要学习WEB前端了. 经过老师的建议,说到他每天都会记录下来新的知识点,每天都是在围绕着这些问题来度过,很有必要每天抽出半个小时来写一个知识总结,及时对一天工 ...

  2. 【web前端学习部落22群】分享 碰撞的小球开源小案例

    对于课程中的疑问,大家可以加 web前端学习部落22群 120342833和其他老师还有众多的小伙伴们进行沟通交流哦,群里还有不少技术大拿.行业大牛 可以一起探讨问题,我们也会安排专业的技术老师为大家 ...

  3. web前端学习部落22群开源分享 左边菜单导航

    有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE html> <html lang ...

  4. 【前端】Web前端学习笔记【2】

    [2016.02.22至今]的学习笔记. 相关博客: Web前端学习笔记[1] 1. this在 JavaScript 中主要有以下五种使用场景 在全局函数调用中,this 绑定全局对象,浏览器环境全 ...

  5. 立方体旋转 【web前端学习部落22群120342833】

    效果: HTML部分: <body class="body"> <div class="rect-wrap">   <!-- // ...

  6. 【前端】Web前端学习笔记【1】

    ... [2015.12.02-2016.02.22]期间的学习笔记. 相关博客: Web前端学习笔记[2] 1. JS中的: (1)continue 语句 (带有或不带标签引用)只能用在循环中. ( ...

  7. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  8. 2015 WEB前端学习路线图

    2015 WEB前端学习路线图,欢迎小伙伴补充 @落雨

  9. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  10. web前端学习笔记

    web前端学习笔记(CSS盒子的定位) 相对定位 使用相对定位的盒子的位置常以标准流的排版方式为基础,然后使盒子相对于它在原本的标准位置偏移指定的距离.相对定位的盒子仍在标准流中,它后面的盒子仍以标准 ...

随机推荐

  1. vue生成包报错error from UglifyJs

    mangle: { keep_fnames: true},

  2. 安装adt-bundle-windows-x86-20130917时遇到的问题及解决方法

    最近在上安卓课,老师让我们下载此软件(adt-bundle-windows-x86-20130917.下载压缩后,打开eclipse的时候,会出现以下情况: 这时说明你的jdk还没下载或者下载错位置了 ...

  3. html5视频播放器 二 (功能实现及播放优化)

    样式改写css,其中的一些按钮是在“阿里妈妈”上找的字体图标,就不向上传了. /* *CoolPlay视频播放器 * 2016年8月1日 * 627314658@qq.com * */ @font-f ...

  4. 条款一:仔细区别pointers 和 reference

    1.一个reference必须总代表某个对象,没有所谓的null reference.如果你有一个变量,其目的是用来指向(代表)另一个对象,但是也有可能它不指向(代表)另一个对象,那么应该使用poin ...

  5. (linux shell)第一章--小试牛刀(下)

    文章来源: (linux shell)第一章--小试牛刀(下) 1.6 数组和关联数组 1.6.1 预备知识 Bash同一时候支持普通数组和关联数组.普通数组仅仅能使用整数作为数组索引,而关联数组能够 ...

  6. myEclipse怎样将程序部署到tomcat(附录MyEclipse调试快捷键)

    部署 1.选中你要部署的项目,在工具栏找到 Deploy MyEclipse J2EE Project to Server 2.单击Add,即出现例如以下界面.选择对应的Server,要和你在配置to ...

  7. PHP导入和导出CSV文件

    CREATE TABLE `student` ( `id` ) NOT NULL auto_increment, `name` varchar() NOT NULL, `sex` varchar() ...

  8. c# Http下载

    1.首先是服务器上发布资源,如果资源时自定义格式,比如 .zidingyi结尾的后缀文件,需要在MIME类型上添加处理方式 需要注意的是.net里面要设置 System.Net.ServicePoin ...

  9. 基本数据类型操作的补充和set的基本操作

    1,补充基本数据类型的知识点:    "  " .join(内容)...........什么加到什么里边,内容可以是:int,str,dic,tup. lst = ["周 ...

  10. BZOJ 3041 水叮当的舞步

    3041: 水叮当的舞步 Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 120  Solved: 67[Submit][Status][Discuss ...