Vue.js目前是前端技术比较火热的开发框架，是一个基于JavaScript的前端开发框架，它可以轻松地构建大型的单页面应用程序。因为项目需要在此记录一下Ubuntu下如何搭建Vue开发环境。
目录
1.nodejs + npm安装
2.安装CNMP（非必要）
3.Vue安装
4.创建程序软连接
5.创建Vue项目
5.部署Vue项目
（1）启动nginx并测试联通性
（2）安装依赖并构建项目
（3）将dis目录拷贝到nginx服务器运行目录下
（4）修改nginx配置文件
（5）重新运行nginx服务器
1.nodejs + npm安装
Node.js是JavaScript运行环境，它能够使我们在服务器端运行JavaScript。
mkdir node-npm-vue
cd node-npm-vue
wget https://registry.npmmirror.com/-/binary/node/latest-v16.x/node-v16.15.0-linux-x64.tar.gz
tar -zxvf node-v16.15.0-linux-x64.tar.gz
cd cd node-v16.15.0-linux-x64/bin/
npm升级方式：
npm install -g npm@9.8.0
2.安装CNMP（非必要）
由于NMP源都在国外，下载相关资源很慢，所以建议用国内的淘宝NPM镜像（http://npm.taobao.org/）通过cnmp命令安装的包都会从淘宝NMP下载，速度很快。
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完之后，安装模块的命令就变为：
cnpm install [name]
同步模块命令为：
cnpm sync connect
3.Vue安装
开发Vue项目，需要全局安装Vue.js的脚手架工具vue-cli。脚手架工具说法很形象，脚手架是为了保证各施工过程顺利进行而搭设的工作平台。
npm install -g vue-cli
4.创建程序软连接
sudo ln -s ~/Downloads/node-npm-vue/node-v16.15.0-linux-x64/bin/npm /usr/bin/npm
sudo ln -s ~/Downloads/node-npm-vue/node-v16.15.0-linux-x64/bin/cnpm /usr/bin/cnpm
sudo ln -s ~/Downloads/node-npm-vue/node-v16.15.0-linux-x64/bin/vue /usr/bin/vue
sudo ln -s ~/Downloads/node-npm-vue/node-v16.15.0-linux-x64/bin/vue-list /usr/bin/vue-list
5.创建Vue项目
以VScode作为IDE来开发vue项目
vue init webpack demo
5.部署Vue项目
以Nginx服务器来托管Vue应用程序为例进行说明
（1）启动nginx并测试联通性
./nginx
http://127.0.0.1:8080/
（2）安装依赖并构建项目
在vue项目根目录下执行如下命令：
sudo npm install
sudo npm run build
可以看到项目根目录下生成dist文件。
（3）将dis目录拷贝到nginx服务器运行目录下
cp -r ~/work/vue/demo/dist ./
（4）修改nginx配置文件
（5）重新运行nginx服务器
killall -9 nginx
./nginx
文章来源：https://www.toymoban.com/news/detail-576394.html
可以看到web页面已经变成vue页面。 文章来源地址https://www.toymoban.com/news/detail-576394.html
到了这里，关于Ubuntu下搭建Vue开发环境，开发第一个程序并部署的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
