开发者社区> 最强的森> 正文

技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-2.启动项目

简介: 使用vscode初始化项目。
+关注继续查看

1.项目初始化

项目分为三端。
1.项目前台web端,也就是呈现给用户的端口和页面。
2.项目管理后台admin端,供管理人员使用的端口和页面,用来实现数据的更新和维护。
3.服务端server端,供前后端开发调用接口的端口。

我们将三端内容创建,并将我们需要的工具包在npm工具中安装下来。
首先在桌面或其它非中文路径创建一个文件夹mine-node
在vscode打开此文件夹
image.png
如果界面没有终端窗口,在菜单栏"查看"中点选终端,把这个窗口召唤出来:)
创建server端
1.面板输入mkdir server,服务端不用使用前端框架,直接创建项目文件夹即可。
2.进入server文件夹(cd server)。
3.初始化项目(npm init -y)。
4.根据初始化后生成的package.json文件中可看到已经设定好的关于main的入口文件index.js,针对此我们在server文件夹创建一个index.js入口文件。
image.png
5.每次我们调用接口时都需要启动服务端,要想启动服务端就需要通过这个index.js入口文件进行server项目启动。
此时在package.json的scripts中设置:

{
  "scripts": {
    "serve": "nodemon index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
}

image.png
6.nodemon是启动node项目的工具,在终端面板输入npm i -g nodemon,-g是全局安装,因为所有项目启动基本都需要这个工具。
7.安装nodemon并且在package.json设置成功后,就可以在终端输入npm run serve启动服务端项目了。
8.根据界面生成的端口号,浏览器进入页面即可。

使用场景:mine-node项目中
cd server
npm run serve
server端后续模块见文章——技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-4.使用axios,并创建接口上传数据到mongodb数据库
image.png
创建web端
由于我们使用vue开发web端,所以使用vue创建该web端项目。
1.终端输入npm i -g @vue/cli,安装vue脚手架。
2.终端输入vue create web回车,安装web项目文件夹。
image.png
选择版本默认安装再次回车即可,没用过vue的朋友就下载2x,时间久网上解答多。
如果安装过程出现npm报错,把vscode关闭,右键以管理员身份运行。
3.安装完成后,web端的项目初始化就完成了,开启端口的方式与server端相同(npm run serve)。
4.根据界面生成的端口号,浏览器进入页面即可。
创建admin端
与web端相同创建过程。

2.安装淘宝镜像

上篇文章说到npm是从国外地址下载文件,所以我们需要使用国内的淘宝镜像提升下载速度,并且更稳定。
1.终端输入安装命令:

npm config set registry https://registry.npm.taobao.org

2.终端验证是否安装成功命令:

npm config get registry

3.关于cnpm

阿里巴巴的淘宝团队把NMP官网的文件、插件包都同步到了在中国的服务器,提供给我们从这个服务器上稳定下载资源。于是cnpm插件就诞生了,意思就是中国的npm。
1.cnpm的作用与npm的淘宝镜像功能相似,也是提供安全、稳定、快速的下载环境。
2.在npm上下载文件有时会失败,使用cnpm会成功,但是这种情况非常少,而且在网上就能找到失败原因(多数情况是因为npm大神上传了新的安装方式,或更新插件时出了bug)。
3.使用cnpm前最好把npm卸载,这两者是不可以混用的。
4.其实我们只要安装了淘宝镜像,下载速度就已经提升,而且不需要再进行npm的替换。
所以在这里我就不展示cnpm的安装方法来,大家有需求百度一下很容易就能给大家解决。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Node.js使用mongodb操作MongoDB数据库
Node.js使用mongodb操作MongoDB数据库
55 0
技能学习:学习使用node.js + vue.js,开发前端全栈网站-1.工具和本地环境
Node.js 运行环境是引领前端开发人员的“一道光”,让前端开发人员**仅**利用已掌握的 js 语言就可以实现对网站服务器环境的搭建与运行。打破了以往前后端分工合作、交流对接的惯性习惯。 相对于传统PHP、JAVA开发,Node.js 附带的npm更方便、快捷地让前端开发人员更快、更方便地使用和获取其他前端大神封装好的 js 类库和精美UI样式库,舍去不同语言和不同编码的切换过程。
327 0
学习VUE3总得知道Proxy怎么使用吧
学习VUE3总得知道Proxy怎么使用吧
25 0
前端开发:Vue封装一个公用的的Submit方法
最近新学Vue,后台开发中经常用到提交,索性把提交功能给做成全局方法,下面为封装的代码。 //封装默认提交方法 Vue.prototype.mySubmit = function (options) { var that = this; //避免this指向被改变 var url = options.
2801 0
前端答疑-对象引用-Vue共享数据源的三种方式
事情发生在上周团队技术分享的时候。 起因在于一个问题:vue 中多个组件如何使用同一个变量,我们叫这个变量为 baseConfig 吧。 说实话我没想到那么多人不理解其中的知识。今天我整理一下发出来。
11 0
技术分享 | 测试平台开发-前端开发之数据展示与分析
测试平台的数据展示与分析,我们主要使用开源工具ECharts来进行数据的展示与分析。 ## ECharts简介与安装 ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表,功能非常强大,目前ECharts已经发布到ECharts 5版本。我们的项目也选择Echarts来作为我们的数据展示与分析工具。 ECharts官网: ```
13 0
+关注
最强的森
北京UI设计,网站开发,小程序云开发
27
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
OceanBase 入门到实战教程
立即下载
阿里云图数据库GDB,加速开启“图智”未来.ppt
立即下载
实时数仓Hologres技术实战一本通2.0版(下)
立即下载