【前端】Vue2 脚手架模块化开发 -快速入门

🎄欢迎来到@边境矢梦°的csdn博文🎄

 🎄本文主要梳理Vue2 脚手架模块化开发 🎄
🌈我是边境矢梦°，一个正在为秋招和算法竞赛做准备的学生🌈
🎆喜欢的朋友可以关注一下🫰🫰🫰，下次更新不迷路🎆

Ps: 月亮越亮说明知识点越重要 (重要性或者难度越大)🌑🌒🌓🌔🌕 

目录

🌸打造高效开发利器！教你搭建Vue2脚手架CLI🚀

❤️段落1：安装CLI并创建Vue项目

🌈段落2：开发入门，快速上手Vue

🌰运行项目

📌Vue 项目结构分析

✨段落3：Vue插件加持，开创无限可能

🌸打造高效开发利器！教你搭建Vue2脚手架CLI🚀

🌟引言段：

目前开发模式的问题

1. 开发效率低

2. 不够规范

3. 维护和升级 , 可读性比较差

为了解决这些问题, 优秀的程序员们打造出了Vue2脚手架CLI，它们的创建可以让你的开发工作事半功倍，让我们一起来探索这个令人兴奋的世界吧！💪

❤️段落1：安装CLI并创建Vue项目

npm uninstall vue-cli -g

npm install -g cnpm --registry=https://registry.npm.taobao.org

npm 和 cnpm 的区别

1) 两者之间只是 node 中包管理器的不同 , 都可以使用

2) npm 是 node 官方的包管理器。 cnpm 是个中国版的 npm ，是淘宝定制的 cnpm (gzip 压缩支持 ) 命令行工具代替默认的 npm

3) 如果因为网络原因无法使用 npm 下载，那 cnpm 这个就派上用场了

4) 小结 : npm 和 cnpm 只是下载的地址不同， npm 是从国外下载东西， cnpm 是从国内

npm install webpack@4.41.2 webpack-cli -D

cnpm install -g @vue/cli@4.0.3

npm install -g @vue/cli@4.0.3

 现在，我们可以使用 webpack 创建 vue 脚手架项目。运行以下命令：

vue init webpack vue_project_quickstart

这将创建一个名为"vue_project_quickstart"的新目录，并在其中初始化Vue项目。等待一段时间后，我们将拥有一个干净、可配置和完全工作的Vue项目！下面是CLI创建项目的过程示意图，让我们一起期待最后的完成吧！😊

D:\vue_project>cd vue_project_quickstart 
D:\vue_project\vue_project_quickstart>npm run dev

然后是 : 

再访问 localhost:8080/

🌈段落2：开发入门，快速上手Vue

现在，我们的Vue项目已经顺利创建，让我们进入开发的核心部分吧！Vue是一款灵活而强大的JavaScript框架，它能够帮助我们构建交互性强、响应式的Web应用程序。下面是一些让你快速上手Vue的关键特点：

1️⃣ 响应式数据：Vue的核心是响应式数据系统，它能够自动追踪数据的变化，并将这些变化反映到页面上。这使得我们可以轻松管理和更新应用程序的状态。

2️⃣ 组件化开发：Vue的组件系统使得我们能够将页面拆分为独立的、可复用的组件。这样做不仅能够提高代码的可维护性，还能加速开发速度。

3️⃣ 单文件组件：Vue支持使用单文件组件的方式组织代码，将HTML、CSS和JavaScript代码放在同一个文件中。这种方式让我们可以更清晰地理解和编辑组件的代码。

下面是一个简单的Vue组件示例，让我们一起迈出开发的第一步吧！🚀

🌰运行项目

得到 :

📌Vue 项目结构分析

 main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: ''
})

 import Vue from 'vue'里的vue

来源

每个路由对象都包含 path、name 和 component 属性。

• path 是路由的路径，表示在浏览器地址栏中输入的路径。
• name 是路由的名称，可以在其他地方使用。
• component 指定一个组件，用于在路由路径匹配时渲染显示。

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path : '/Hello',
      name: 'Hello',
      component: Hello
    }
  ]
})

 是 Vue Router 中的一个特殊组件，用于渲染匹配到的路由组件。

在 Vue Router 中，我们可以定义多个路由，每个路由可以匹配到一个组件。 标签的作用就是在应用的模板中标记出路由组件展示的位置。

当路由切换时， 会根据当前的路由路径动态加载对应的路由组件，并在指定的位置进行渲染。

下面是一个示例，展示了如何使用 ：

在上述示例中， 被放置在了