Javaweb4webstrom2021建立vue2.X====vueCLI2.X

版本

1、本机安装node.js，安装node.js之后就自带了npm

2、本地安装webpack。WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其转换和打包为合适的格式供浏览器使用。

3、安装vue脚手架 vue-cli。作用就是快速搭建一个vue.js项目的结构，帮忙导入一些必须的依赖包，创建基础的项目文件夹。

4、创建vue项目：因为webstrom下载包比较慢，所以直接在本地新建，再导入webstrom。步骤如下：============================================================

win+x以管理员权限打开powershell，输入以下命令

 看到Project initialization finished!后吗，就可在设置的文件夹中看到项目文件了

 然后打开webstrom引入这个项目

访问  http://localhost:8080，看到这个界面，表示成功。

 =========================================

这个新建的vue.js也可以通过其他方式启动

=======================================================

从上图可以看出 开发环境的入口文件为“webpack.dev.conf.js”；生产环境的入口文件为“build.js”，他们都在build文件下。 

其中部分文件说明如下：
build.js---生产环境的入口文件，为构建打包文件，会将源码进行构建（编译、压缩等）后打包；
utils.js---一个被使用频率的文件，这个文件包含了三个工具函数：生成静态资源的路径、生成 ExtractTextPlugin对象或loader字符串、生成 style-loader的配置；
webpack.base.conf.js---在webpack.dev.conf.js中出现webpack.base.conf.js，这个文件是开发环境和生产环境，甚至测试环境，这些环境的公共webpack配置;
webpack.dev.conf.js---开发环境中webpack的配置入口。
webpack.prod.conf.js---为生产环境中webpack的配置入口。同时，它也依赖于前面提到的webpack.base.conf.js、utils.js和config/index.js;

 =======================================================================

项目打包部署

 

打包完成后会生成dist文件夹，如图所示，项目上线时，直接将dist文件夹放到服务器即可。看下dist文件夹里的东西熟悉吧，html css js。

比如，我们自己用IDEA建立了一个web项目，就将dist下面的所有东西放到web项目的webapp文件夹里面。

 

Vue.js系列(一)：Vue项目创建详解 - 码探长 - 博客园Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js，并详细介绍使用vue-cli脚手架工具快速的创建Vue项目https://www.cnblogs.com/aizai846/p/12634878.html

================================================================

dist中的内容放到webapp文件夹后出了问题，查找过后发现是路径名，因为npm的dev和build是不同的，我们拷贝过去的是build之后产生的文件。爬坑之路开始，一直想不通前端用webstorm做好前端内容之后后端怎么使用？这里不深入研究，因为前后端分离的也不需要处理这个。只要将前后端单独部署就行了，通过接口互相调用。