初始vue

开发vue的方式

开发vue有两种方式

  • 传统开发模式:基于html/css/js文件开发vue
  • 工程化开发方式:在webpack环境中开发vue,这是最推荐的方式。

vue-cli的使用

webpack基本使用

  • 初始化一个vue项目
1
vue create 项目名(不能用中文)
  • 启动项目
1
npm run serve
  • 访问项目
1
2
3
4
浏览器访问  
http://localhost:${端口号}/
http://127.0.0.1:${端口号}/
http://${本地ip}:${端口号}/

目录分析

重要介绍

  • 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
2
3
4
5
6
7
8
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
// 配置端口号
devServer: {
port: 3000
}
})

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