创建一个vue项目:
vue create component-demo
此时CMD窗口可以关闭了
用Idea打开项目
.md 文件的写法 # 一级标题 ## 二级标题 ### 三级标题 ``` 引用 ```
目录结构:
里面有个 node_modules 文件夹没有显示出来
components目录下有个HelloWorld.vue,同理,我们可以在这里写其他的vue文件
App.vue是一个根组件,我们先看这个文件
在App.vue文件内使用模块的步骤:
当然,你也可以在Movie.vue文件里面用这招👆
element-ui:
npm i element-ui :i是 install 安装的简写
下载好后,源码放在 node_modules 文件夹里
还会在 package.json 里面留下记录
从网上下载项目后不会包含 node_modules 文件夹,在项目路径下运行:
npm i :会自动下载 node_modules 下所需的源码
在main.js文件里:
使用第三方图标库:
网站:Font Awesome,一套绝佳的图标字体库和CSS框架 (dashgame.com)
1.下载安装
npm i font-awesome :安装
2.在main.js里面导入:
Axios:
1.安装
npm i axios
Axios是基于Ajax的异步请求框架的增强框架
main.js是最全局的,我们首先看它
前端用node服务器运行的8080端口,后端用SpringBoot的TomCat服务器运行的8081端口,即使前端去8081端口拿数据,也会出现跨域问题,Controller类添加@CrossOrigin注解可以有效解决此问题
后端数据Axios发送给前端后出现此问题:
caught (in promise) TypeError: Cannot set properties of undefined (setting 'tableData')
at eval (Hello.vue:75:1)
我们可用使用箭头函数避免此类问题的发生:
vueRouter是vue提供的一个官网插件vueRouter3对应vue2