前端环境部署
小白自学项目,不是什么教程,仅记录流程
框架:SpringBoot+Vue
准备:Idea Nodejs(前端开发环境) Jdk(后端开发环境) Mysql
以上默认安装完毕
创建vue项目:
安装Vue/cli:
npm install -g @vue/cli
或者
yarn global add @vue/cli
npm install -g @vue/cli
# OR
yarn global add @vue/cli
以前安装过此次则为更新
使用vue/vli创建项目
1、vue create 项目名
或者
vue ui
2、执行命令后会有以下选择,按方向键选择最后一个按回车选定
3、进入vue/cli提供的组件选择页面
4、按空格选定或者取消,默认选中Linter是代码规范
选择Bable、Router(路由)然后回车
5、进入版本选择页面,此处选择2.x
6、在弹出的页面输入Y回车
7、在弹出的选项选择In package.json回车
8、在弹出的选项输入y保存,并输入保存的名称回车
9、项目初始化、安装依赖等等
10、安装完毕,根据命令依次执行蓝色命令
11、进度条读完以后会出现端口提示
12、如果想更换端口
可以在这个页面先按Ctrl+C结束然后在次执行npm run serve即可
13、将网址输入以后出现此页面证明部署成功
报错1:
原因:镜像过期
解决方案:
1、查看镜像设置 npm config list
2、设置新镜像
npm config set registry https://registry.npmmirror.com(淘宝镜像)
3、再次查看镜像设置
4、镜像修改成功重新执行安装命令。
报错2:
原因:npm没有使用权限
解决办法:在node的安装目录,将文件夹 node_cache和node_global赋予用户权限
点击应用
两个文件夹进行同样的设置即可,重新执行安装命令即可。
项目目录结构
用idea打开新建的项目:
public:放静态文件,静态的html、图标等等
src:源码文件
assets:放图片,logo等等
components:放vue组件
router:定义路由,路由用来切换界面
views:视图,即看见的页面
App.vue:是所有页面的入口
main.js:是vue所有配置的入口,在此导入Vue、App、router等等
将所有的对象组装到一起
vue.config.js:vue/cli配置文件,这里可以配置端口、配置跨域访问等等