Vue笔记-01初始vue
初始vue
开发vue的方式
开发vue有两种方式
- 传统开发模式:基于html/css/js文件开发vue
- 工程化开发方式:在webpack环境中开发vue,这是最推荐的方式。
vue-cli的使用
webpack基本使用
- 初始化一个vue项目
1 | vue create 项目名(不能用中文) |
- 启动项目
1 | npm run serve |
- 访问项目
1 | 浏览器访问 |
目录分析
重要介绍
public/index.html不用动,提供一个最基础的页面
src/main.js不用动, 渲染了App.vue组件
src/App.vue默认有很多的内容,可以全部删除
1
2
3<template>
<div id="app"> </div>
</template>assets文件夹与components直接删除
修改端口号
如果需要覆盖webpack的配置,可以修改vue.config.js文件,覆盖webpack配置文件
1 | const { defineConfig } = require('@vue/cli-service') |
vue单文件组件的说明
一个.vue
文件就是一个组件,后续开发vue,所有的功能都是基于组件实现。
根组件为app.vue
一个单文件组件由三部分构成
- template(必须) 影响组件渲染的结构 html (只能有一个根元素,就是最外层只能有一个div)
- script 逻辑js
- style 样式 css less scss
style用于提供组件的样式,默认只能用css
可以通过style标签,
lang="less"
开启less的功能,需要安装依赖包
npm install less-loader@7.2.1 less --save-dev
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 xMing-Blog!