不是所有的前端项目都适合使用node.js开发,有时候我们只是进行一些简单页面的开发。比如每次开发java
web,thymeleaf和freemarker写的很难受,不如vue.js开发来的迅速,而且对于一个有前后端分离开发习惯的人来说,几乎可以无学习成本直接上手。
特别在一些公司的老项目中,往往只能使用最原始的jsp形式开发,这是如果在jsp中使用vue.js的形式开发前端,往往事半功倍,还可以避免学习淘汰技术,顺便学习vue.js。
环境搭建
使用CDN形式引入vue.js
axios
echarts
element ui
ant design vue
如果是本地开发,可以将CDN指向的资源文件下载到本地进行引入
vue.js 2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39
| <html>
<head> <title>Title</title> <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/[email protected]/lib/theme-chalk/index.css"/> <script src="https://unpkg.com/[email protected]/lib/index.js"></script> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/antd.min.css"/> <script src="https://unpkg.com/[email protected]/dist/antd.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/echarts.min.js"></script> </head>
<body> <div id="app">
</div> </body> <script> new Vue({ el: '#app', data() { return {} }, mounted() { }, methods: {} }) </script> <style> </style>
</html>
|
vue.js 3
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
| <html>
<head> <title>Title</title> <script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/index.css"/> <script src="https://unpkg.com/@element-plus/icons-vue"></script> <script src="https://unpkg.com/[email protected]"></script> <script src="https://unpkg.com/dayjs/dayjs.min.js"></script> <script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script> <script src="https://unpkg.com/dayjs/plugin/weekday.js"></script> <script src="https://unpkg.com/dayjs/plugin/localeData.js"></script> <script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script> <script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script> <script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script> <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/antd.min.css"/> <script src="https://unpkg.com/[email protected]/dist/antd.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/echarts.min.js"></script> </head>
<body> <div id="app">
</div> </body> <script> const App = { setup() { return {} }, mounted() { }, methods: {} } const {createApp, ref, reactive} = Vue createApp(App).use(ElementPlus).use(antd).mount('#app') </script> <style> </style>
</html>
|
CSS样式
1 2 3 4 5 6 7 8 9 10 11
| flex: 1; display: flex; flex-flow: row wrap;
margin: 0; padding: 0;
box-sizing: border-box; width: 100%; height: 100%;
|
相关开发文档
- vue.js 2
- vue.js 3
- element
- element plus
- ant design vue 1.7.8
- ant design vue 3.2.14
- axios
- echarts
- css