已经有环境的话可以直接用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中写点数据就能看到效果了。
项目结构参考下文:
========================================================
发现没有router目录,原来是没有使用webpack
再次重新建立
打开想要创建项目的目录,然后vue init webpack demo,然后依次选择所要信息,要网好!
建好再用webstrom导入,有路由router文件夹了