开发环境部署:

1. 安装Visual Studio Code

2. 安装node.js

3. 运行Visual Studio Code,新建终端,输入命令安装:npm install

4. 继续在终端输入命令安装:npm install -g vue-cli

5.继续在终端输入命令安装:npm install -g webpack

6.在C:\Windows\System32目录中,输入命令:set-executionpolicy RemoteSigned

   这条命令确保避免指令vue init webpack myvue创建VUE项目时报错!

上述完成了开发环境的部署。

首次VUE项目的创建、调试和生产部署

1. 指令方式创建VUE项目,并初步运行。

    运行Visual Studio Code,新建终端,进入自己选定的目录,输入命令启动首个VUE项目,命令如下:

 vue init webpack myvue

其中myvue是项目名称,之后需要根据实际填写和选择几项内容:   

至此,完成项目myvue的创建,目录中出现myvue目录,进入myvue目录,可以继续输入npm run dev命令进行初步运行,在浏览器里输入:http://localhost:8080,看到如下画面就是成功了。

2. 打包部署在Tomcat Apache环境运行

(1)VSCode打开myvue目录

  (2) 首先注意,需要对index.js的build:{}中的assetsPublicPath值'/'改成'./', 否则部署后,页面路径错误导致页面不显示。

 (3) 新建终端,进入myvue目录,输入命令打包:npm run build,等完成后,生成dist目录

 (4) 把dist目录复制到Tomcat Aapche的webapp目录中,运行启动Tomcat Apache,在浏览器中输入:http://localhost:8080,看到调试一样的画面就成功了。

   

Logo

前往低代码交流专区

更多推荐