Vue使用1.vscode创建项目到发布

1.安装Nodejs

下载地址：https://nodejs.org/en/

2.安装vscode

vscode官网：https://code.visualstudio.com/

扩展插件:

2_1 Chinese 中文插件
2_2 Vetur —— 语法高亮、智能感知、Emmet等
包含格式化功能， Alt+Shift+F （格式化全文），Ctrl+K Ctrl+F（格式化选中代码，两个Ctrl需要同时按着）
2_3 EsLint —— 语法纠错
2_4 open in browse——设置在网页中打开快捷键
2_5 Live Server——一款可以在浏览器实时显示当前vscode代码的插件

3.全局安装vue-cli，vue-cli可以帮助我们快速构建Vue项目。

安装命令：

npm install -g vue-cli

打开VScode的终端，调出命令输入框。点击终端-新建终端，输入上述命令，回车，等待安装完成。

4.安装webpack，它是打包js的工具

安装命令：

npm install -g webpack 

安装方法同上。

5.安装完成之后就可以开始创建vue项目，首先创建一个文件夹用来存放你的项目，用vscode打开对应的文件夹，并在终端cd到对应的文件夹。比如我的文件夹就是myvue

创建项目命令，输入回车:

vue init webpack myvue

其中myvue就是项目名称，根据喜好自己取。

接着会出现一些配置项，可以根据需要配置，也可以默认，直接按回车。

然后继续等待安装依赖项。完成之后，一个基本的 vue项目就搭建完了。完成之后的vscode左边可以看到如下目录，其中main.js就是入口。

6.接着运行项目，先cd到项目文件夹，cd myvue，然后输入以下指令

npm run dev

7.项目打包发布上线

输入命令：

npm run build

完成之后，项目文件夹中会出现一个dist文件夹，里面就是打包之后的内容，直接部署就好了。

8.发布tomcat(tomcat下载)

8_1.打开终端 执行 npm run build （node编译打包命令，最后生成的网页都在工程的dist文件夹下）

8_2.拷贝./dist文件夹的所有网页相关文件

8_3.进行我的Tomcat目录，创建一个文件夹(我的名称是vuecli)

8_4.粘贴生成的网页等文件

8_5.重启Tomcat（默认本地运行）

8_6.访问项目http://localhost:8080/vuecli/

遇到问题

问题1 ：vue -v 出现vue : 无法加载文件 C:UsersmtAppDataRoaming pmvue.ps1，因为在此系统上禁止运行脚本。有关详细信息，请参阅 https:/go.microsoft.com/fwlink/?LinkID=1351
70 中的 about_Execution_Policies。

解决办法：在这里插入图片描述
1.查找到PowerShell，右击用管理员身份运行。
2.输入set-ExecutionPolicy RemoteSigned
选择a或者y都行。
然后在去要创建项目的地方就ok了

问题2 ：运行vue时，报’vue-cli-service’ 不是内部或外部命令，也不是可运行的程序 或批处理文件。

解决办法：npm install （安装到node_modules目录中）

问题3 ：Error: [BABEL] E:\workcode\VueItem\big-screen-vue-datav\src\main.js: Cannot find module 'E:\workcode\VueItem\big-screen-vue-datav\node_modules\@babel\compat-data\data\corejs3-shipped-proposals'

解决办法：npm update --depth 5 @babel/compat-data