版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_44580977/article/details/100810665
在开发中,需要打包的东西不止是js、css、html。还有更多的东西要处理,这些插件和加载器如果我们一一去添加就会比较麻烦。
幸好,vue官方提供了一个快速搭建vue项目的脚手架:vue-cli
安装命令
npm install -g vue-cli
用vue-cli命令,快速搭建一个webpack的项目:
vue init webpack
项目结构
入口文件:
需要注意的是,我们看到有一类后缀名为.vue的文件,我们称为单文件组件
每一个.vue文件,就是一个独立的vue组件。类似于我们刚才写的loginForm.js和registerForm.js
只不过,我们在js中编写 html模板和样式非常的不友好,而且没有语法提示和高亮。
我们执行npm run dev
或者 npm start
都可以启动项目:
而单文件组件中包含三部分内容:
每个组件都有自己独立的html、JS、CSS,互不干扰,真正做到可独立复用。
看看生成的package.json:
我们执行npm run dev
或者 npm start
都可以启动项目: