前言

  之前是用Vue的,现在由于工作原因,开始使用Angular。分别是Vue2和Angular5入的坑。只是从使用上来对比总结,加深记忆,避免混淆。 什么 ?  你问实现原理的异同及优劣? 本宝宝还在努力学习中,也许有生之年你可以看到分析贴。

不管用什么框架,创建项目都是第一步。发展到现在,AngularVue 都有官方的脚手架用来快捷的创建和配置项目。

创建项目

  Angular和Vue的脚手架都依赖于NodeJs和Npm,所以先确认自己的环境。两个脚手架都需要全局安装

//Angular-cli
npm install -g angular-cli
//vue-cli
npm install -g vue-cli

  可以使用版本检查命令确认是否安装成功,命令行中 ng -v 或者 vue -V ,如果可以正常输出版本,就说明安装成功了。注意vue-cli版本检查,后面加的参数是 大写的 V。

  现在可以开始创建项目了。

  Angular-cli 使用 ng new 命令创建新项目,可以在创建时指定style风格,是否需要带routing等(详细配置);创建之后,会默认自动安装依赖,当然也可以通过--skip-install跳过安装。

  安装完依赖之后,进入目录,即可通过 ng serve 命令调试,可以指定host、port、是否自动打开浏览器,env等( 详细配置 ),env是用于管理配置文件的,后续也会提到。

//创建ngtest项目,指定scss风格的style
ng new --style=scss ngtest
//安装完依赖之后,进入目录
cd ngtest
//调试
ng serve --open --port=3001

  如果依赖正常,就会看到Angular项目的初始界面了,工程创建成功。

  Vue-cli 使用 vue init <template> <app-name> 命令创建新项目。脚手架提供了多种模版,可以按需选择模版,一般使用 webpack模版。可以通过vue list 命令查看所有的模版

// 创建Vue项目
vue init webpack vue-test
// 进入目录
cd vue-test
// 启动调试
npm run dev

  创建Vue项目时,会有多个提示引导使用者来配置项目,如果没有特殊的偏好,一路默认下去即可。

  进入工程目录,npm run dev即可调试项目,正常就会看到Vue的初始界面。

  Vue-cli 在 package.json 中查看到不同的命令使用的配置文件,如:dev时入口配置文件为 ‘build/webpack.dev.conf.js’ ,Vue-cli的webpack配置都在build目录下,参考 webpack的 配置文档,慢慢就可以掌握脚手架中的配置  , 且脚手架将一些常用配置放在了config目录中。而Anguar虽然也是基于webpack的,但是其中webpack的配置要通过ng eject导出才可以看到,而项目的配置都在 .angular-cli.json中完成 ( 详细配置) 。

项目结构

  Angular和Vue的目录结构非常类似,常用的就源码src目录和一些配置项。

  

调试/打包

  Vue-cli调试和打包的都在build目录中修改配置;而Angular-cli 则命令行中进行参数配置,按照默认命令时,会有以下配置,当然可以根据需求进行更改( 详细配置 )。不管哪个脚手架,仔细了解下webpack都是很有必要的。

Angular-cli 命令新建文件

  Angular-cli还提供了快捷新建文件的功能,通过 ng generate [type] [filename] 来新建指定文件 ( 详细配置) ,新建文件时可以带参数来进行配置,也可以直接在 .angular-cli.json配置文件的defaults中进行配置。比如在创建component时,就可以配置 组件的前缀(prefix) , 是否被引入到模块(skip-import),是否被导出(export),是否带测试文件(spec)等等,可以节省很多时间。当然创建时也可以指定路径 ng g c test/test , 在test目录中创建test组件,当然都是在App目录下。

Angular 和 Vue 使用的对比总结 -- 脚手架的更多相关文章

  1. Angular和Vue.js 深度对比

    Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面.当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强.如今,已有许多开发人员开始使用 Vue ...

  2. NO.05--谈一谈Angular 和 Vue.js 的对比。

    几天的vue之后,给需要的盆友们带来一篇对比,也算是我近期之内业余时间的大工程,现在开始: Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面.当和其它网络工 ...

  3. angular与vue的应用对比

    因为各种笔试面试,最近都没时间做一些值得分享的东西,正好复习一下vue技术栈,与angular做一下对比. angular1就跟vue比略low了. 1.数据绑定 ng1 ng-bind,{{ sco ...

  4. angular和vue的对比学习之路

    vue-ng 打开vue的中文官网一段关于vue的描述 HTML 模板 + JSON 数据,再创建一个 Vue 实例,就这么简单. 那我么再看下angular中文网 AngularJS是为了克服HTM ...

  5. Vue和React对比

    Vue和React对比 Vue也已经升级到2.0版本了,到现在为止(2016/11/19)比较流行的MVVM框架有AngularJS(也有人认为其为MVC).ReactJS和VueJS,这三个框架中, ...

  6. Angular和Vue.js

    Angular和Vue.js Vue.js 是开源的 JavaScript 框架,能够帮助开发者构建出美观的 Web 界面.当和其它网络工具配合使用时,Vue.js 的优秀功能会得到大大加强.如今,已 ...

  7. Angular Js 与bootstrap, angular 与 vue.js

    今天突然接到电话, 问我他们的区别  虽然平时看了,但是没记住,凉凉是肯定的 总结一下: bootstrap不算是javascript框架,它只是一个前端的ui框架,然后有一些附带的js插件而已.an ...

  8. angular和vue还有jquery的区别

    angularjs简单介绍和特点 首先angular是一个mvc框架, 使用mvc解耦, 采用model, controller以及view的方式去组织代码, 会将一个html页面分成若干个模块, 每 ...

  9. angular和vue双向数据绑定

    angular和vue双向数据绑定的原理(重点是vue的双向绑定) 我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象 ...

随机推荐

  1. 新概念英语(1-123)A trip to Australia

    Who is the man with the beard?(胡须)A:Look, Scott. This is a photograph I took during my trip to Austr ...

  2. notepad++运行Python

    1.打开notepad++的菜单栏,点击run 2.输入cmd /k python "$(FULL_CURRENT_PATH)" & PAUSE & EXIT 3. ...

  3. JavaScript实现接口的三种经典方式

    /* 接口:提供一种说明一个对象应该有哪些方法的手段 js中有三种方式实现接口: 1 注释描述接口 2 属性检测接口 3 鸭式辨型接口 */ /* 1 注释描述接口: 不推荐 优点: 利用注解,给出参 ...

  4. Python 爬虫性能相关

    性能相关 在编写爬虫时,性能的消耗主要在IO请求中,当单进程单线程模式下请求URL时必然会引起等待,从而使得请求整体变慢. import requests def fetch_async(url): ...

  5. Web微信

    一.源代码地址: https://github.com/HuangAm/Webweixin 二.总结: 1.分析Http请求 - 请求方式:get.post等等 - URL:每个请求的url,固定部分 ...

  6. POJ-2993 Emag eht htiw Em Pleh---棋盘模拟

    题目链接: https://vjudge.net/problem/POJ-2993 题目大意: 输入和输出和这里相反. 思路: 模拟题,没啥算法,直接模拟,不过为了代码精简,还是花了一点心思的 #in ...

  7. NSDateFormatter常见的使用方式

    NSDateFormatter是NSFormatter的子类,是用来表示输出的时间格式. 下面贴出两个时间的例子. 例子一. - (void)dateString1 { NSDateFormatter ...

  8. React Native(十五)——RN中的分享功能

    终于,终于,可以总结自己使用RN时的分享功能了-- 为什么呢?且听我慢慢道来吧: 从刚开始接触React Native(2017年9月中旬)就着手于分享功能,直到自己参与公司的rn项目开发中,再到现在 ...

  9. 确定稳定的 Spring Cloud 相关环境版本

    开发部署 Spring Cloud 微服务框架,需要先确定 Spring Cloud 的相关环境版本,主要包含:Spring Cloud.Spring Cloud Netflix.JDK.JRE.Ja ...

  10. CodeForces 914DBash and a Tough Math Puzzle(线段树的骚操作)

    D. Bash and a Tough Math Puzzle time limit per test 2.5 seconds memory limit per test 256 megabytes ...