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

这篇具有很好参考价值的文章主要介绍了【前端】Vue2 脚手架模块化开发 -快速入门。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

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

目录

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

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

🌈段落2:开发入门,快速上手Vue

🌰运行项目

📌Vue 项目结构分析

✨段落3:Vue插件加持,开创无限可能


【前端】Vue2 脚手架模块化开发 -快速入门,前端,前端,vue,javascript,node.js

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

🌟引言段:

目前开发模式的问题
1. 开发效率低
2. 不够规范
3. 维护和升级 , 可读性比较差

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


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

【前端】Vue2 脚手架模块化开发 -快速入门,前端,前端,vue,javascript,node.js

1. 搭建 Vue 脚手架工程,需要使用到 NPM(node package manager), npm 是随 nodejs 安装 的一款包管理工具 , 类似 Maven 。所以我们需要先安装 Nodejs
2. 为了 更好兼容 ,这里我们安装 node.js10.16.3 , 要求同学们也使用这个版本 ( 因为这里 只是演示 Vue 脚手架工程 ), 后面我们还会讲解 Vue3 的脚手架工程搭建 , 再对 Node 升级 .
3. 如果以前安装过 node.js , 为防止版本冲突,先卸载之 , 如果你没安装 nodejs, 就不用管

【前端】Vue2 脚手架模块化开发 -快速入门,前端,前端,vue,javascript,node.js

进行操作 : 

【前端】Vue2 脚手架模块化开发 -快速入门,前端,前端,vue,javascript,node.js

4. 下载 node.js10.16.3 地址 : https://nodejs.org/en/blog/release/v10.16.3 /

【前端】Vue2 脚手架模块化开发 -快速入门,前端,前端,vue,javascript,node.js

5. 安装 node.js10.16.3 , 直接下一步即可 , 建议 安装到 d:\program\nodejs10.16
【前端】Vue2 脚手架模块化开发 -快速入门,前端,前端,vue,javascript,node.js
6. 验证是否安装成功 , 如果看到不到 , 退出 cmd, 重新开一个窗口测试即可
【前端】Vue2 脚手架模块化开发 -快速入门,前端,前端,vue,javascript,node.js
7. 先删除以前的 cli 版本 < 不论是之前未下载或没有下载 >
npm uninstall vue-cli -g

8. 安装淘宝镜像-cnpm

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 是从国内
下载东西
8. 安装 webpack webpack-cli , 指令:
npm install webpack@4.41.2 webpack-cli -D

(说明:这里指定了 webpack 的版本,请保持一致, webpack 是一个打包工具)

9. 安装
cnpm install -g @vue/cli@4.0.3

如果出错了用

npm install -g @vue/cli@4.0.3

后者慢点而已

10. 确认 Vue-Cli 版本
【前端】Vue2 脚手架模块化开发 -快速入门,前端,前端,vue,javascript,node.js
创建目录 vue_project, cmd 到该目录
【前端】Vue2 脚手架模块化开发 -快速入门,前端,前端,vue,javascript,node.js

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

vue init webpack vue_project_quickstart

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

【前端】Vue2 脚手架模块化开发 -快速入门,前端,前端,vue,javascript,node.js

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

然后是 : 

【前端】Vue2 脚手架模块化开发 -快速入门,前端,前端,vue,javascript,node.js

再访问 localhost:8080/

【前端】Vue2 脚手架模块化开发 -快速入门,前端,前端,vue,javascript,node.js  


🌈段落2:开发入门,快速上手Vue


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

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

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

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

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

🌰运行项目

1. Vue 脚手架项目,直接拖到 IDEA ,就可以打开
2. 配置 NPM

【前端】Vue2 脚手架模块化开发 -快速入门,前端,前端,vue,javascript,node.js

得到 :

【前端】Vue2 脚手架模块化开发 -快速入门,前端,前端,vue,javascript,node.js

📌Vue 项目结构分析

【前端】Vue2 脚手架模块化开发 -快速入门,前端,前端,vue,javascript,node.js

 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: '<App/>'
})

 import Vue from 'vue'里的vue

【前端】Vue2 脚手架模块化开发 -快速入门,前端,前端,vue,javascript,node.js
来源

【前端】Vue2 脚手架模块化开发 -快速入门,前端,前端,vue,javascript,node.js


 文章来源地址https://www.toymoban.com/news/detail-692796.html

每个路由对象都包含 pathname 和 component 属性。

  • path 是路由的路径,表示在浏览器地址栏中输入的路径。
  • name 是路由的名称,可以在其他地方使用。
  • component 指定一个组件,用于在路由路径匹配时渲染显示。
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path : '/Hello',
      name: 'Hello',
      component: Hello
    }
  ]
})

 

<router-view/> 是 Vue Router 中的一个特殊组件,用于渲染匹配到的路由组件。

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

当路由切换时,<router-view/> 会根据当前的路由路径动态加载对应的路由组件,并在指定的位置进行渲染。

下面是一个示例,展示了如何使用 <router-view/>

<template>
  <div>
    <h1>My App</h1>
    <router-view/>
  </div>
</template>

在上述示例中,<router-view/> 被放置在了 <div> 标签中,用于展示匹配到的路由组件。当切换路由时,对应的路由组件会被渲染在 <router-view/> 标签的位置。

请注意,在使用 <router-view/> 前,你需要确保已经正确配置了 Vue Router,并且在组件中导入了 Vue Router,并将其配置为 Vue 实例的插件。


<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

这段代码是一个 Vue 组件的模板部分,使用了 <template> 标签来定义组件的结构和内容。具体解释如下:

  • <template> 标签用于定义 Vue 组件的模板内容。
  • 在这个例子中,模板中包含了一个顶级的 <div> 元素,其类属性为 "hello"
  • <h1> 元素使用了 Vue 的插值语法 {{ msg }},表示将 msg 属性的值动态地渲染到页面上。
  • <h2> 元素用于展示标题文本。
  • <ul> 元素表示一个无序列表,其中包含了多个列表项 <li> 。
  • 每个列表项都是一个超链接 <a>,通过 href 属性指定链接地址,通过 target="_blank" 属性设置在新标签页中打开链接。
  • 在模板的中部使用了一个 <br> 元素插入一个换行。
  • 该模板还包含了另外一个 <h2> 元素和一个包含多个列表项的 <ul> 元素,用于展示更多的链接。

在 <script> 标签中,通过 export default 导出一个 Vue 组件对象,该对象具有以下属性和方法:

  • name 属性指定了该组件的名称为 'HelloWorld'
  • data 方法返回一个对象,其中的 msg 属性初始值为 'Welcome to Your Vue.js App'。这个属性可以在模板中使用插值语法动态渲染到页面上。

这样就完成了一个带有模板和数据的 Vue 组件的定义。


✨段落3:Vue插件加持,开创无限可能

除了强大的核心功能外,Vue还有许多优秀的插件和扩展库,能够为我们的开发提供更多的便利和可能性。以下是我推荐给大家的几个Vue插件:

1️⃣ Vue Router:Vue Router是Vue官方提供的路由管理插件。它能够帮助我们方便地实现前端路由,构建单页应用或者多页应用,让我们的应用具备良好的导航功能。

2️⃣ Vuex:Vuex是Vue官方提供的状态管理插件。它使得组件之间的状态共享和管理变得轻松而高效,让我们能够更好地组织和维护我们的应用程序状态。

3️⃣ Element UI:Element UI是一套基于Vue开发的组件库,提供了众多美观、易用的UI组件,使得我们的应用程序拥有出色的用户体验。

这些插件和扩展库的加入,让我们的开发变得更加简单、高效,让我们的想象力展开无限的翅膀!💡

🌟结语段:
搭建Vue2脚手架CLI不仅是一门工具的使用,更是一种高效、便捷开发的方式的选择。借助Vue的强大功能、丰富的生态系统以及众多优秀的插件和扩展库,我们能够以更高的效率开发出精美、功能丰富的Web应用程序。希望我的这篇帖子能够给你带来启发和帮助,让我们一起打造令人瞩目的开发利器吧!✨

 

到了这里,关于【前端】Vue2 脚手架模块化开发 -快速入门的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue2-配置脚手架、分析脚手架、render函数、ref属性、props配置项、mixin配置项、scoped样式、插件

    🥔:总有一段付出了没有回报的日子 是在扎根 更多Vue知识请点击——Vue.js Vue CLI(Vue Command Line Interface)Vue脚手架,Vue官方提供的标准化开发工具(开发平台) 安装node.js——可以查看此教程 第一步:输入命令npm config set registry=http://registry.npm.taobao.org 配置镜像站,全局安装

    2024年02月12日
    浏览(65)
  • Vue2向Vue3过度核心技术工程化开发和脚手架

    1.1 开发Vue的两种方式 核心包传统开发模式:基于html / css / js 文件,直接引入核心包,开发 Vue。 工程化开发模式:基于构建工具(例如:webpack)的环境中开发Vue。 工程化开发模式优点: 提高编码效率,比如使用JS新语法、Less/Sass、Typescript等通过webpack都可以编译成浏览器识

    2024年02月11日
    浏览(53)
  • 【vue2第八章】工程化开发和使用脚手架和文件结构

    vue工程化开发 使用脚手架VUE CLI: 1,核心包传统开发模式:基于js/html/css直接引入核心包开发vue。 2,工程化开发。基于构建工具如(webpack)的环境中开发vue。 vue cli是什么: vue cli是一个vue官方提供的一个全局的命令工具. 可以帮助我们快速的创建一个开发vue项目的标准化基础

    2024年02月10日
    浏览(42)
  • Vue | (三)使用Vue脚手架(上) | 尚硅谷Vue2.0+Vue3.0全套教程

    学习链接:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通,本文对应p61-p69,博客参考尚硅谷公开笔记,补充记录实操。 Vue 脚手架是 Vue 官方提供的标准化开发工具(开发平台)。 CLI :command line interface(目前已经维护了,但也试一试) 全局安装 : npm config set registry https:/

    2024年02月20日
    浏览(41)
  • Vue | (三)使用Vue脚手架(下)| 尚硅谷Vue2.0+Vue3.0全套教程

    学习链接:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通,本文对应p79-p95,博客参考尚硅谷公开笔记,补充记录实操。 区别于JS里的内置事件。 一种 组件间通信 的方式,适用于: 子组件 === 父组件 使用场景 :A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自

    2024年02月22日
    浏览(55)
  • Vue学习计划-Vue2--VueCLi(二)vuecli脚手架创建的项目内部主要文件分析

    1. 补充: 什么叫单文件组件? 一个文件中只有一个组件 vue-cli 创建的项目中, .vue 的文件都是单文件组件,例如 App.vue 2. 进入分析 1. package.json : 项目依赖配置文件: 如图,我们说主要的属性: name : 项目的名称 version : 项目版本 scripts : 脚本入口 serve : 启动项目命令 build :

    2024年02月04日
    浏览(72)
  • 使用vue脚手架搭建前端工程(附:搭配ElementUI来快速开发)

    目录 一、搭建过程 1. 全局安装webpack(打包工具) 2. 全局安装vue脚手架 3. 初始化vue项目 4. vue项目目录的简单介绍 二、执行流程分析 三、自己造一个组件案例 四、ElementUI的使用 1. 环境的引入 2. 一个简单使用 3. 使用它来快速搭建后台管理系统 五、总结 npm install webpack -g np

    2024年02月10日
    浏览(68)
  • 《代码实例前端》Vue-cil脚手架,二级路由,增删查改

    UserAdd.vue UserList.vue UserManagement.vue UserUpdate.vue Action.vue Comedy.vue HelloWorld.vue Movie.vue MyRouter.vue index.js AboutView.vue HomeView.vue App.vue main.js vue.config.js

    2023年04月08日
    浏览(40)
  • 【Vue2+3入门到实战】(17)VUE之VueCli脚手架自定认创建项目、ESlint代码规范与修复、 ESlint自动修正插件的使用 详细示例

    VueCli脚手架自定认创建项目 ESlint代码规范与修复 ESlint自动修正插件 1.安装脚手架 (已安装) 2.创建项目 选项 手动选择功能 选择vue的版本 是否使用history模式 选择css预处理 选择eslint的风格 (eslint 代码规范的检验工具,检验代码是否符合规范) 比如:const age = 18; = 报错!多加

    2024年02月03日
    浏览(53)
  • 前端基础(Vue的模块化开发)

      前言 :前面学习了前端HTML、CSS样式、JavaScript以及Vue框架的简单适用,接下来运用前端模块化编程的思想,继续学习Vue框架,完成自己项目项目的搭建。 目录 响应式基础 ref reactive 学习成果展示 Vue项目搭建 搭建自己的vue项目 总结  关于ref和reactive,官方解释如下,另外一

    2024年02月12日
    浏览(50)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包