vue-cli 快速入门

最新推荐文章于 2024-09-10 20:26:21 发布

m0_66357705

最新推荐文章于 2024-09-10 20:26:21 发布

阅读量943

点赞数 17

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_66357705/article/details/139610119

版权

vue-cli （目前向Vite发展）

介绍：Vue-cli 是Vue官方提供一个脚手架，用于快速生成一个Vue的项目模板。
Vue-cli提供了如下功能：
- 统一的目录结构
- 本地调试
- 热部署
- 单元测试
- 集成打包上线
依赖环境：NodeJS

注 cmd使用 "node -v" 可以是否有依赖环境：NodeJS**

安装

npm install -g @vue/cli
npm prefix -g # 这个可以查看下载的地址

Vue项目-创建

vue create vue-project01    # 使用命令创建
vue ui                      # 使用 图形化界面创建-要网络

Vue项目-目录结构

Vue项目的标准目录结构是基于Vue脚手架创建出来的工程。

Vue项目-端口

# 在vue.config.js下
# 这个是默认的 默认的端口是8080
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true
})

# 我们更改了配置，现在的端口是7000
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    port:7000
  }
})

Vue项目-启动

在命令行输入 npm run serve
或者

ctrl + c 可以终止任务

项目是如何跑起来

开发服务器启动：Vue CLI 使用 webpack-dev-server 启动一个热重载的 development 服务器。默认情况下，它会监听 8080 端口，但如果你在 vue.config.js 中修改了端口，它会使用你指定的端口。
构建项目：Vue CLI 会根据 vue.config.js 中的配置和 package.json 中的依赖来构建你的项目。这包括编译 .vue 文件、JavaScript 文件、样式文件等。
index.html：index.html 是你的项目的入口 HTML 文件。这个文件通常放在 public 目录下。当开发服务器启动时，它会将 index.html 文件作为响应发送给浏览器。在 index.html 中，有一个空的 div 元素，其 id 为 app：
```
<div id="app"></div>
```
这个 div 元素是 Vue 应用的挂载点。Vue 会在这个 div 中渲染你的应用。
App.vue 和 main.js：App.vue 是你的 Vue 应用的根组件，而 main.js 是应用的入口 JavaScript 文件。main.js 中，createApp(App) 创建了一个新的 Vue 应用实例，app.use(router) 安装了路由器，app.use(ElementPlus) 安装了 Element Plus 组件库，最后 app.mount('#app') 将这个应用实例挂载到 index.html 中的 div#app 元素上。
路由和组件渲染：当你的应用运行时，Vue 路由器会根据当前 URL 的路径来决定哪个组件应该显示在 router-view 标签所在的位置。在 App.vue 中，<router-view/> 是一个占位符，它会渲染与当前路径匹配的组件。
热重载：Vue CLI 的开发服务器支持热重载（hot module replacement）。这意味着当你修改了代码并保存时，浏览器会自动更新，而不需要手动刷新页面。

Vue的结构

<template>
  <!-- 模板部分，由它生成HTML代码 -->
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
// 控制模板的数据来源和行为
import ElementView from './ElementView.vue';
export default {
  components: {ElementView},
  data() {
    return {
      message: 'Hello, Vue!'
    }
  },
  methods: {
    // 这里可以定义方法
  }
}
</script>

<style>
/* CSS样式 */
h1 {
  color: red;
}
</style>

import 语句是 ES6 模块系统的一部分，它允许您从其他文件导入函数、对象、变量等。在 Vue.js 中，import 语句常用于导入组件、插件、工具函数等，以便在当前文件中使用。

// 导入默认导出
import MyComponent from './MyComponent.vue';

// 导入多个项目
import { comp1, comp2 } from './components.js';

// 导入并重命名
import { comp1 as myComp1 } from './components.js';

// 导入所有
import * as utils from './utils.js';



export default {
  components: {MyComponent} //注册局部组件
}

注意事项
- import 语句必须放在文件的顶部，因为在 JavaScript 中，模块是静态的，不能在条件语句或函数内部导入模块。
- 导入的模块会被缓存，所以同一个模块多次导入时，实际上只会加载一次。
- 如果导入的是一个默认导出（如 export default），则可以任意命名导入的变量。如果导入的是命名导出（如 export const），则需要使用对象解构赋值的方式来导入。

components: {ElementView}, 注册局部组件,方便在父组件的模板中使用这些组件。
export default 是 ES6 模块系统的语法，用于导出组件的定义。这种语法允许您将组件作为模块导出，然后在其他文件中通过 import 语句导入和使用。
data 选项，它必须是返回一个对象的函数。这是因为 Vue 组件是可复用的，每个实例都需要有一个独立的拷贝数据对象。