前言
之前是用 vue 的, 现在由于工作原因, 开始使用 Angular. 分别是 Vue2 和 Angular5 入的坑. 只是从使用上来对比总结, 加深记忆, 避免混淆. 什么 ? 你问实现原理的异同及优劣? 本宝宝还在努力学习中, 也许有生之年你可以看到分析贴.
不管用什么框架, 创建项目都是第一步. 发展到现在, Angular https://github.com/angular/angular-cli 和 Vue https://github.com/vuejs/vue-cli 都有官方的脚手架用来快捷的创建和配置项目.
创建项目
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 等(详细配置 https://github.com/angular/angular-cli/wiki/new); 创建之后, 会默认自动安装依赖, 当然也可以通过 --skip-install 跳过安装.
安装完依赖之后, 进入目录, 即可通过 ng serve 命令调试, 可以指定 host,port, 是否自动打开浏览器, env 等( 详细配置 https://github.com/angular/angular-cli/wiki/serve ),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 的 配置文档 https://www.webpackjs.com/ , 慢慢就可以掌握脚手架中的配置 , 且脚手架将一些常用配置放在了 config 目录中. 而 Anguar 虽然也是基于 webpack 的, 但是其中 webpack 的配置要通过 ng eject 导出才可以看到, 而项目的配置都在 .angular-cli.json 中完成 ( 详细配置 https://github.com/angular/angular-cli/wiki/angular-cli ) .
项目结构
Angular 和 Vue 的目录结构非常类似, 常用的就源码 src 目录和一些配置项.
调试 / 打包
Vue-cli 调试和打包的都在 build 目录中修改配置; 而 Angular-cli 则命令行中进行参数配置, 按照默认命令时, 会有以下配置, 当然可以根据需求进行更改( 详细配置 https://github.com/angular/angular-cli/wiki/build ). 不管哪个脚手架, 仔细了解下 webpack 都是很有必要的.
Angular-cli 命令新建文件
Angular-cli 还提供了快捷新建文件的功能, 通过 ng generate [type] [filename] 来新建指定文件 ( 详细配置 https://github.com/angular/angular-cli/wiki/generate ) , 新建文件时可以带参数来进行配置, 也可以直接在 .angular-cli.json 配置文件的 defaults 中进行配置. 比如在创建 component 时, 就可以配置 组件的前缀 (prefix) , 是否被引入到模块(skip-import), 是否被导出(export), 是否带测试文件(spec) 等等, 可以节省很多时间. 当然创建时也可以指定路径 ng g c test/test , 在 test 目录中创建 test 组件, 当然都是在 App 目录下.
来源: https://www.cnblogs.com/shapeY/p/8881743.html