两年前端，除了略懂一点php，其他后端知识完全不懂，此文档作为摸索学习记录，如朋友们看到不对的地方或有更好的方法提出建议，在下不胜感激~
这里我演示的是Vue2+Vue-cli3x，nodejs+mysql项目，因太多东西是第一次尝试，所以记录的尽可能详细
nodejs自行下载安装，安装nodejs会附带安装npm 此处为安装包下载地址
一、买一个阿里云ESC服务器
对各大厂商的服务器不了解，买了一个阿里云入门版的当做测试服务器 点此处前往购买
以下为购买流程
1.基础配置
买张家口的是因为价格比较便宜，入门级配置（个人测试是没问题的），服务器系统选择了Windows Server，待有时间后会学习Linux的系统再重新部署一下
2.网络和安全组
因此浏览器只做个人测试，所以选择了按使用流量缴费，此处可按个人喜好来选择
3.系统配置
这个密码要记住，链接远程电脑的时候要用这个密码（忘掉了也是可以在控制台重置的）
4.分组设置不是必填项可跳过
5.确认订单
到这一步看一下配置的没有错就可以付款去了
付款后可在阿里云控制台管理服务器 点此处前往阿里云控制台
此处ip地址（公）为公网IP（用来连接远程电脑及访问测试）
二、Vue项目
学习链接：Vue官方教程、Vue-CLI官方文档
可以使用下列任一命令安装这个新的包：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装完成后，命令行中访问vue命令查看安装的版本，我安装的是3.9.3
vue --version
将命令行工具位置切换到想创建项目的地址
vue ui
上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。
这样创建项目比用命令行更简单更直观
填写项目文件夹名称，选择包管理器（我选择的是npm），点击下一步
第一次创建建议手动选择
先选择几个用的上的就可以，之后项目中如需要可以再增加
可保存为新预设，下次创建项目直接就能用了
稍等一会后提示项目创建成功，你在项目文件夹下就能看到了，src为开发目录
可在这里运行项目、打包项目、检查修复源文件
点击运行后完成，再点击启动app，浏览器自动打开运行项目
项目运行显示如下
src文件夹下，assets为素材目录（图片、css、js），components为组件目录（vue组件式开发很是用的，文件为.vue），views为视图目录（存放网页，文件为.vue），App.vue为入口文件，mian.js为入口js，router.js、store.js为安装的依赖（项目再添加依赖要创建类似js）
引入样式方法
编写组件方法，style标签那里的scoped属性为仅对当前文件有效
引用组件及使用方法
静态页面自行编写，接下来是打包项目到dist文件夹
运行项目或打包项目之前可以先检查修复下，会减少报错
文件打包成功后，项目文件夹下出现一个dist文件夹，这个文件夹就可以直接部署到服务器了
这个项目是我新创建的没写什么东西，但是当写一些东西后再打包，文件超过244kb就会出现警告
这就需要在vue.config.js中写一些配置了，为解决这个问题我看了网上很多相关帖子，解决办法是 gzip压缩
在根目录下创建vue.config.js，文件内容如下
// vue.config.js//
const path = require("path");
const CompressionPlugin =require("compression-webpack-plugin");//引入gzip压缩插件
const productionGzipExtensions = ["js","html","css"];
const webpack =require("webpack");
module.exports = {
publicPath:"/",productionSourceMap:false,//打包时不要map文件
outputDir: process.env.outputDir,//输出文件目录
lintOnSave:true,//是否在保存的时候检查
assetsDir:"static",//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
devServer: {port:8090},
configureWebpack:config=>{if(process.env.NODE_ENV ==="production") {// 生产环境config.plugins.push(newwebpack.ProvidePlugin({$:"jquery",jQuery:"jquery","windows.jQuery":"jquery"}),newCompressionPlugin({//gzip压缩配置// asset: "[path].gz[query]",// algorithm: "gzip",test:newRegExp("\\.("+ productionGzipExtensions.join("|") +")$"),//匹配文件名threshold:10240,//对超过10kb的数据进行压缩deleteOriginalAssets:false,//是否删除原文件minRatio:0.8}) ); }else{// 开发环境} },// CSS 相关选项css: {extract:true,// 是否开启 CSS source map？sourceMap:false,// 为预处理器的 loader 传递自定义选项。比如传递给// sass-loader 时，使用 `{ sass: { ... } }`。loaderOptions: {},// 为所有的 CSS 及其预处理文件开启 CSS Modules。modules:false},// 在多核机器下会默认开启。parallel:require("os").cpus().length >1,// PWA 插件的选项。pwa: {},// 第三方插件的选项pluginOptions: {}};
此后再压缩还是有这个报错！这是因为没有删除原文件，不建议删除，等传到服务器后调试好了再把多余的删除吧~
三、上传文件到服务器
买了服务器了就赶紧用，要不一天一天过去，钱都浪费了，所以我决定先把静态页面放上去
这里填服务器的公网IP
点显示选项，本地资源下点击详细信息
将项目所在盘选上，然后连接远程桌面
此处密码为买阿里云服务器时，系统设置那里的密码
如果忘记了可去控制台重置
我买的是有UI的服务器，操作起来简单一些
1.在服务器上安装PHPstudy 此处为下载地址
把文件放到项目同一个盘下即可，因为上一步远程的时候选了此盘连接到服务器
在服务器计算机中打开本机文件夹，将PHPstudy安装包复制到服务器盘内进行安装，安装成功后
2.将项目文件夹复制到C:\phpstudy_pro\WWW 下，再在PHPstudy中配置好即可运行
这是在本机电脑或者手机浏览器上输入域名，就能看到之前做的静态页面了，可以稍微开心一下
四、如何使用nodejs写一个接口
我看了 大帅瓜 写的博客，直接就成功了，一点报错都没有，太厉害了
这里附上大牛原博客，我就不瞎说啥了 点击此处传送
五、把nodejs文件放到服务器运行
连接远程桌面后，将nodejs文件复制到项目目录中server下（自己创建的，前端页面放在web文件夹）
自行安装数据库软件 此处是随便找的安装包地址
在服务器命令行运行nodejs接口，我写的端口是3000
在本机或手机上看接口返回数据看不到，是因为服务器安全组没有配置，3000的这个端口是未定义的
在阿里云控制台安全组列表点击配置规则
添加安全组规则，入方向和出方向都配置上
端口写想要的那个，授权对象写 0.0.0.0/0是无限制
添加好后就发现本机能调用服务器上的接口了，目前仍在做这个项目，会持续更新学习记录在其他文章。
网友评论