首次用VSCode开发Vue项目的几个关键步骤
搭建VSCODE开发VUE项目的环境,并完成首个VUE项目的创建、调试、打包部署实验。
开发环境部署:
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,看到调试一样的画面就成功了。
更多推荐
所有评论(0)