vue构建前端项目

1.安装环境

# 安装node.js并检查版本
node -v

# 检查npm版本，安装完node.js就会有npm
npm -v

# 用vue-cli创建vue前端项目
# 安装vue-cli
npm install -g @vue/cli

输出了一大堆日志信息，既然是入门教程，没报错就不用管，反正看不懂

2.创建项目并测试启动

# 创建vue项目，这里的 vue-test 是项目名称，可以自定义
# 这一步是在会在当前目录下创建一个vue-test目录，所以可以先cd到自己存放工程的目录，我的目录是：/r/project/vue/
cd /r/project/vue/
vue create vue-test

在红线箭头标注的地方，会暂停让我们选择使用vue2还是vue3 默认是vue3 我这里直接回车使用了vue3，继续执行后续内容。

# 下一步便可以启动项目
# 进入到vue-test目录
cd ./vue-test

# 执行启动命令
npm run serve

# 浏览器访问 http://localhost:8080/  测试是否创建成功

访问成功的页面如图：

3.打包部署

部署前，打包vue项目

# 进入到项目的所在的目录
cd ./vue-test
# 执行打包命令
npm run build

打包完成后会在项目文件夹下生成一个dist目录，这就是打包好的内容

将项目部署到服务器

参考：

vue项目部署到linux服务器的nginx上