[JavaScript知识库]Vue新建web前端工程与部署

环境检查

本人创建的Web项目使用Vue，版本如下：
Vue:4.5.12
node:v12.8.3
npm 6.4.14
开发工具IDEA 2020

创建工程

（1）在web目录下执行下面的命令，进行创建vue项目

vue init webpack webPro
? Project name web
? Project description test
? Author XXX
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

创建完工程后，进入package.json所在目录，执行npm run dev（如果执行失败，则先npm install,然后npm run dev），此时本地打开页面如下：

（2）创建工程目录
先创建目录结构，不做任何操作，

src下的目录为
	assets   //图片等资源
	common   //公共组件
	components  // 组件
	network    // 前后端交互
	router     // 路由
	store     // 
	view   //页面

（3）打包与发布
执行npm run build,会在dist目录多出前台的静态文件，在linux虚拟机中安装nginx

wget http://nginx.org/download/nginx-1.13.7.tar.gz
 tar -xvf nginx-1.13.7.tar.gz
 ./configure
 make
 make install
 whereis nginx  // 查看nginx的安装目录

nginx安装完成后，远程查看网址如下：

将静态文件放入到html目录，重新启动nginx后，查看页面如下：