第一句话“软件工程学源于建筑工程学”
进入正题:
-
安装 Vue: 你可以通过 npm 或直接在 HTML 文件中引入 Vue 的 CDN 链接来安装 Vue。
npm install vue
或者在 HTML 文件中:
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
-
创建 Vue 实例: 在你的 JavaScript 文件中创建一个 Vue 实例,并将其挂载到一个 DOM 元素上。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue 示例</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="app"> {{ message }} </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue!' } }); </script> </body> </html>
-
使用组件: 你可以创建自定义组件并在 Vue 实例中使用它们。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue 组件示例</title> <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> </head> <body> <div id="app"> <my-component></my-component> </div> <script> Vue.component('my-component', { template: '<div>这是一个自定义组件!</div>' }); new Vue({ el: '#app' }); </script> </body> </html>
-
使用 Vue CLI: 对于更复杂的项目,你可以使用 Vue CLI 来创建和管理项目。运行该命令会在目录生成相关文件夹,用于存放不同的开发代码。CLI脚手架与建筑工程学中的脚手架有异曲同工之妙。
npm install -g @vue/cli vue create my-project cd my-project npm run serve