Angular 和 Vue 使用的对比总结 -- 脚手架

匿名 (未验证) 提交于 2019-12-02 21:53:52

前言

  

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跳过安装。

详细配置

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

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

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

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

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

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

配置文档 ng eject导出才可以看到,而项目的配置都在 .angular-cli.json中完成 ( 详细配置 ) 。

项目结构

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

  

调试/打包

详细配置 )。不管哪个脚手架,仔细了解下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目录下。

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!