Vue 学习笔记7

Vue 学习笔记7

@Author: YiHua Lee @Address: Guangdong province, China

vue-cli

介绍和安装

在开发中,需要打包的东西不止是js、css、html。还有更多的东西要处理,这些插件和加载器如果我们一一去添加就会比较麻烦。

幸好,vue官方提供了一个快速搭建vue项目的脚手架:vue-cli

使用它能快速的构建一个web工程模板。

官网:https://github.com/vuejs/vue-cli

安装命令:sudo npm install -g vue-cli

20200901105755

快速上手

1)创建一个module

20200901110947

2)切换到该目录

20200901111907

3)用vue-cli命令,快速搭建一个webpack的项目:vue init webpack

20200901113443

开始初始化项目,并安装依赖

20200901113729

安装成功!可以使用npm run dev命令启动。


项目结构

安装好的项目结构:

20200901114107

入口文件:main.js

20200901114520

单文件组件

需要注意的是,我们看到有一类后缀名为.vue的文件,我们称为单文件组件

20200901115249

每一个.vue文件,就是一个独立的vue组件。类似于我们刚才写的login.js和register.js

只不过,我们在js中编写 html模板和样式非常的不友好,而且没有语法提示和高亮。


而单文件组件中包含三部分内容:

  • template:模板,支持html语法高亮和提示
  • script:js脚本,这里编写的就是vue的组件对象,还可以有data(){}等
  • style:样式,支持CSS语法高亮和提示

每个组件都有自己独立的html、JS、CSS,互不干扰,真正做到可独立复用。


运行

先看看生成的package.json:

20200901142301
  • 这引入了非常多的依赖,绝大多数都是开发期依赖,比如大量的加载器。
  • 运行时依赖只有vuevue-router
  • 脚本有三个:
    • dev:使用了webpack-dev-server命令,开发时热部署使用
    • start:使用了npm run dev命令,与上面的dev效果完全一样,当脚本名为“start”时,可以省略“run”。
    • build:等同于webpack的打包功能,会打包到dist目录下。

执行npm run dev 或者 npm start 都可以启动项目:

20200901142546

页面:

20200901142623

参考文献

  1. 黑马 Java

评论