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 [email protected],即可将其安装到当前项目中。
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 回车即可。
标签:vue,项目,简介,element,nginx,点击,Vue,组件 From: https://blog.csdn.net/LYH_010312/article/details/136691457