Vue - 一个项目的基本架构

175 阅读1分钟

VUE起步的5个依赖

  css-loader
  style-loader
  vue-loader
  vue
  vue-template-compiler

  项目名称不能以Vue命名,否则安装vue时会出现问题,因此这里继续在Webpack文件夹中进行Vue的实践,也能避免多个node_modules文件夹给电脑带来的负担。

  删掉原本webpack实践的app文件夹后新建app文件夹并配置入口文件main.js,入口文件中引入Vue及App.vue根组件,以new Vue()的方式使Vue运行,el即element launch表示在哪个元素中运行,render表示渲染,render中的h函数在后面的笔记中详述:

  然后创建App.vue根组件,任何组件都由3部分组成,分别是结构部分template、程序部分script、样式部分style,任何组件的扩展名均为.vue并且命名以大写字母开头:

  在App.vue中随便写一点东西就能在命令窗口 npm run dev 启动项目查看一下运行的效果:

  【注意】如果启动项目时出现报错,只要在项目目录下重装webpack即可:

  成功启动后就可以看到在App.vue中随便写的东西:

  回顾一下整个项目的完整架构:

  【注意】template中必须有一个div,所有要写的其它html结构全部统一放到这个div里。

  快捷创建vue组件
  VS Code安装插件 Vue VS Code Snippets后在组件中键入vb后选中提示里的vbase回车即可。