angular6.0版本是google在angularjs上进行一次大的升级,提高了性能 更改了API方面的知识。
创建项目第一步
第二步
安装好nodejs后 安装 Angular CLI 使用npm命令安装,打开控制台进行安装,-g表示全局 global的意思。
npm install -g @angular/cli//安装脚手架工具,用于快速创建项目
第三步
创建工作空间和初始应用 ng 表示angular的命令,my-app表示项目名称,可自行更改.
ng new my-app//创建一个名为my-app的项目
第四步
启动开发服务器
cd my-app//进入到项目目录
ng serve --open//打开项目并且运行本端
ng build //编译,也必须进入到main.js目录或者main.ts目录
完成angular项目的创建。中文官方地址Angular6.0,里面有更详细的步骤
新增创建组件和服务
angular6.0是一个组件化的开发,每个模块都可以划分为单个小型的组件进行提供,通过DI的方式进行组件和服务之间的调用.
ng g c 组件名//创建组件 全写:ng generate component your_name.
ng g s 服务名//创建服务 全写: ng generate service your_service_name.
默认情况下,Angular CLI 命令
ng generate component
在生成组件时会带有模板文件,你可以通过参数来覆盖它:
ng generate component 组件名称 -it
为数据创建一个类和接口
为数据创建一个类class和接口interface
ng g class 类名
ng g interface 接口名称
升级当前项目的脚手架版本
npm install --save-dev @angular/cli@latest
备注
启动一个原有的angular项目,执行以下的命令,如果端口被占用,可以更改端口进行启动,或者关闭占用的端口,有时候ng指令无效 重新安装一下脚手架 全局安装即可使用指令。
npm start // 打开浏览器输入地址 http://localhost:4200/
ng serve --port 4201//用于修改端口.简写:ng serve --p 端口号
Vue构建项目
首先第一步安装脚手架工具Vue-cli
当然前提条件也是基于node的npm包,也可以用yarn,建议用npm安装。安装成功后,可以用 vue --version或者vue --v进行版本检查是否正确。
npm install -g @vue/cli//成功安装后,验证
vue --version //或者 vue --v
第二步
安装原型扩展,进行vue文件的快速开发
npm install -g @vue/cli-service-global
伪第三步,启动命令
用于启动vue服务和vue的项目
vue serve 组件名//启动一个.vue的文件或者组件
第三步,创建vue的项目支架
快速使用命令创建vue项目
vue create 项目名称//里面默认使用webpack的打包工具进行一些配置.
第四步,vue项目放置到服务器,压缩文件
npm install -g @vue/cli-service-global//全局安装后,方可执行
cd src//进入到src目录 app.vue所在的目录
vue build //进行编译后会生成一个 dist的文件夹 ,将这个文件夹发送给后台人员。
启动一个已有vue的项目
npm run serve//进入到项目目录,打开终端,进行执行这条命令.
备注:
官网创建一个项目的详细地址,
更改端口号:默认端口号是8080,修改默认,找到vue里面的配置文件config文件进行配置port端口。