1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 快速入门Angular或Vue前端环境配置和项目运行

快速入门Angular或Vue前端环境配置和项目运行

时间:2024-06-24 02:21:59

相关推荐

快速入门Angular或Vue前端环境配置和项目运行

本文档仅介绍Angular和Vue项目的环境安装到项目运行,具体相关api请到相应官网进行学习

第一步:建议安装编译器:vscode(也可以使用idea等其他编译器)

安装地址:/Download

设置中文语言环境:

/article/7e44095377c9d12fc1e2ef5b.html

第二步:安装nodeJS和NPM(必备环境)

/en/(选择LTS版本)

安装后在控制台输入

node -v

npm -v

通过是否显示版本号来检验是否安装成功

参考地址:/article/48b37f8dd141b41a646488bc.html

如果在windows下需要安装多个Node版本可以参考

/kevinlvhsl/p/6226758.html

第三步:安装命令行工具(用来快速构建,运行,打包Angular或Vue项目等)

1)Angular:

安装angular-cli

在控制台输入

npm install -g @angular/cli

输入

ng -v

显示版本号则安装成功

2)Vue:

安装vue-cli和webpack

在控制台输入

npm install --global vue-cli

输入

vue -V

显示版本号则安装成功

在控制台输入

npm install webpack -g

输入

webpack -v

显示版本号则安装成功

第四步:构建一个应用或拉取已经存在的git项目

在控制台cd到你想要放置项目的文件夹路径,然后输入命令

1)Angular:

ng new ProjectName (ProjectName为项目文件夹名称)

2)Vue:

vue init webpack ProjectName (ProjectName为项目文件夹名称)

3)如拉取已经存在的git项目,需要安装依赖,输入

npm install

第五步:运行应用

1)Angular:

ng new构建项目或拉取已存在项目并npm install完成后,

cd到对应的项目文件夹下面

输入

ng serve --open

完成后将自动打开浏览器并自动访问http://localhost:4200/

这时候将看到该angular项目的第一个页面

注意:如果遇到如下问题

参考/linjiangjin/p/10396773.html

2)Vue:

输入

npm run dev

完成后一般将自动打开浏览器并自动访问http://localhost:8080/,如果不是查看他提供的地址进行访问

这时候将看到该Vue项目的第一个页面

第六步:根据项目或自身需要前往官网学习Angular或Vue相关api!

Angular官网:/

Vue官网:/

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。