Vue项目简介

Vue项目的创建： 

1）在桌面上创建一个Vue文件夹，打开后在搜索栏中 输入cmd,打开命令窗，输入 vue ui  调出图形化界面。

2）创建一个项目

3）点击手动 

4）将路由打开router

5)vue版本选择为2X,语法检测选择第一项。

6）创建好项目之后，直接用vscode打开vue文件夹，以下为所创建的文件夹目录介绍。

7）运行项目

在项目终端中输入：  npm run serve   即可运行项目。

点击项目中的package.jason 即可看到左下栏目中出现 NPM脚本，点击运行。 

8）修改端口号

在vue.config.js文件中增加devServer:{

port: 7000

}

在命令栏中按下CTRL+C 输入Y 即可停止服务器，然后再重启即可。

Vue组件库Element： 

1）首先在当前工程目录中安装element组件库

在项目终端中输入 npm install element-ui@2.15.3,即可将其安装到当前项目中。 

2）将element ui组件库引入main.js中，然后在Views中创建新的文件element，将所有组件elementView放入该目录下。

在默认情况下，系统展示的是App.vue组件下的内容，想要展示自己所创建组件的内容，首先，将App.vue组件中的内容删除，只留下框架。

在div中输入<element-   .编译器会自动补全。 

 

按下Ctrl+Alt+L  能够将element文档中复制下来的代码进行格式话，使得代码更加的美观。 

3）要在vue项目中使用Axios请求，首先要安装AXois, 需要使用时，再导入。

 

vue路由 

 

 

 

打包以及部署： 

1）打包

在NPM脚本栏中点击build即执行打包操作，执行完成后会生成一个dist目录，可以打开文件夹查看。

 

2）部署

 

 

 

nginx端口号默认为80端口，如果点击nginx.exe没有反应的话，那么点击conf文件夹中的nginx.conf,打开 将80改为其它未被占用的端口即可90。

 

打开后，在任务管理器中搜索ngnix，查看有没有nginx的进程，如果能看到进程，说明nginx已经在运行，那么打开浏览器，输入网址 localhost: 90 回车即可。