Javaweb4webstrom2021建立vue3.X====vueCLI4.X

已经有环境的话可以直接用webstrom新建vue.js项目，非常方便，当时要网好。
Installation | Vue.jshttps://v3.vuejs.org/guide/installation.html#download-and-self-host参照官方文档安装

卸载之前安装的老版本VUE和VUE CLI

 npm uninstall vue -g

 npm uninstall vue/cli -g

安装

 npm install vue@next -g

npm install -g @vue/cli

最终版本信息

win+x管理员身份打开shell,CD到想要新建项目的地址

vue3===vue cli 4项目结构

将该项目导入webstrom

 

npm命令启动下，就想成maven的几个命令就行了

成功======================================================

我们来详细看下项目的结构=======

vue cli4搭建的项目明显精简了许多，连NPM命令也变了

node_modules：用于存放我们项目的各种依赖；
public：用于存放静态资源（不会变动的）；
public/index.html：模板文件，作用是生成项目的入口文件。
浏览器访问项目的时候就会默认打开的是生成好的 index.html。
src：是存放各种 .vue 文件的地方。
src/assets：用于存放着各种静态文件（可能会变动），比如图片。
src/components：存放公共组件（可复用），比如 header.vue、footer.vue 等。
src/router/index.js：vue-router 路由文件。
需要引入 src/views 文件夹下的 .vue，配置 path、name、component。
src/store/index.js：是 vuex 的文件，主要用于项目里边的一些状态保存。
比如 state、mutations、actions、getters、modules。
src/views，存放页面组件（不可复用），比如 Login.vue，Home.vue。
src/App.vue：App.vue 是项目的主组件；
App.vue 中使用 router-link 引入其他模块，所有的页面都是在 App.vue 下切换的。
src/main.js：入口文件，主要作用是初始化 vue 实例，同时可以在此文件中引用某些组件库或者全局挂载一些变量。
.gitignore：配置 git 上传想要忽略的文件格式。
babel.config.js：一个工具链，主要用于在当前和较旧的浏览器或环境中将 ES6 的代码转换向后兼容（低版本ES）。
package.json：模块基本信息项目开发所需要的模块，版本，项目名称。
package-lock.json：是在 npm install 时候生成的一份文件，用于记录当前状态下实际安装的各个 npm package 的具体来源和版本号。
====================================================================

将这个项目打包，方便我们后端使用

用IDEA maven新建一个web项目，并将vue项目build生成的dist文件夹中 所有文件拷贝到web项目的webapp下面。web项目配置tomcat后启动，访问后发现index.html head是能显示的，但页面空白，这个问题vue2.X也遇到过，检查路径配置并在index中id为app的div中写点数据就能看到效果了。

项目结构参考下文：

vue学习之路（二）vue-cli目录结构分析 - 知乎先附上我的个人博客： 小全技术博 前言：我们已经用vue-cli建立起了vue项目框架，但是建立起了要怎么用呢，也许会有许多人一看到一大堆的文件目录就有一些慌张了，可是官方却说这是简化我们的开发过程。官方这么说…https://zhuanlan.zhihu.com/p/33988422

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

发现没有router目录，原来是没有使用webpack

再次重新建立

打开想要创建项目的目录，然后vue init webpack demo,然后依次选择所要信息,要网好！

建好再用webstrom导入，有路由router文件夹了