如何从零开始开发自己的vue项目,从零开始打造自己第一个工程化的前端项目,vue-admin项目?

从零开始开发vue项目


很多人想学习分离式开发(我也不不知道名词对不对)无从下手,npm,vue,nodejs,还有各种名字,运行环境,如何安装,如何配置各种各样的问题出现。脑袋都涨了也没有搞懂,没有 系统性的交费学习 过是要走很多弯路了,这也是没有办法的。接下来,我们直接做一个 vue-admin 的项目来直接上手认识这种分离式的开发,排版,还有就收这种  nodejs 到底是怎么玩的。

接下来,我们一起开始学习把。

注意:vue 与 vue-cli 的版本,文章有待更新,只做参考,需要一起学习可以进Q群:687361645


文章来源地址https://www.toymoban.com/diary/vue/142.html

前置要求


1、安装 nodejs ,去 nodejs 官网下载安装即可

输入 node -v 和 npm -v,查看版本号,显示即安装成功

image.png


2、安装代码编辑器 Visual Studio

image.png

3、使用 vsCode 自带的命令行工具 或者 使用 Git


初始化项目 或者 创建项目


1、通过以下命令初始化项目

运行命令生成一个配置文件 package.json

npm init -y

如何从零开始开发自己的vue项目,从零开始打造自己第一个工程化的前端项目,vue-admin项目?


2、安装打包工具 webpack

需要安装 webpack 和 webpack cli

 npm install -D webpack webpack-cli

如果安装失败,请逐个安装

npm install --save-dev webpack
npm install --save-dev webpack-cli

3、创建项目入口


1、创建 index.html 文件

2、新建 src 文件夹,创建 main.js,作为项目总入口文件。

     main.js 作用:

           1、创建 vue 根示例,就是类似于导入初始文件

           2、挂载 App组件,就是引入你需要的公共模块

3、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-admin</title>
</head>
<body>
    <div id="app"></div>
</body>
</html>

4、main.js

// 从vue包中导入vue对象
import Vue from 'vue'

new Vue({
    el: '#app'
})

5、具体完成后的目录结构

vue-admin
├─ package-lock.json
├─ package.json
├─ pubilc
│  ├─ favicon.ico
│  └─ index.html
└─ src
   └─ main.js

注:如何查看 npm -g 全局安装过哪些包?


持续更新中.....




到此这篇关于如何从零开始开发自己的vue项目,从零开始打造自己第一个工程化的前端项目,vue-admin项目?的文章就介绍到这了,更多相关内容可以在右上角搜索或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://www.toymoban.com/diary/vue/142.html

如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请联系站长进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用
未经允许不得转载:Toy模板网 » 如何从零开始开发自己的vue项目,从零开始打造自己第一个工程化的前端项目,vue-admin项目?
上一篇 2023年08月19日 16:44
下一篇 2023年08月19日 16:44

相关文章

  • 从零基础开始开发自己的第一个微信小程序

    通过本篇blog,你可以熟悉从零开始,搭建小程序开发环境,并运行起自己的第一个小程序。 1、 注册账号 2、 下载开发工具搭建开发环境 3、 创建工程,编写代码 4、 手机上查看效果 通过以上四步就能创建属于自己的小程序了。 注册完成后是这样的 小程序开发工具下载地址

    2024年02月14日
    浏览(82)
  • 如何使用Vue和C++实现OJ《从零开始打造 Online Judge》

    课程链接:https://www.lanqiao.cn/courses/20638 邀请码:x8pGd60V 本课程采用前后端分离架构,基于 Vue.js 和 C++ 技术,从零开始打造 Online Judge。 课程介绍 OJ 是 Online Judge 系统的简称,用来在线检测程序源代码的正确性。OJ 系统能够编译并执行代码,使用预设的数据对这些程序进行测试

    2024年02月12日
    浏览(59)
  • 如何从零开始开发一个小程序

    申请账号 小程序注册页 开发设置 登录 小程序后台 ,我们可以点击左侧菜单 “开发”-“开发管理”,点击后正文上方点击 “开发设置” ,就看到小程序的 AppID(小程序ID) 了 。 小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别

    2024年02月10日
    浏览(65)
  • 从零开发一个自己的Shiro+Vue通用后台管理系统(附源码)

    分享一个基于Shiro和Vue构建的通用后台管理系统项目,该项目实现了jwt无状态登录、redis缓存、token续期和可控权限管理。

    2024年02月06日
    浏览(51)
  • 小程序开发:如何从零开始建立你的第一个小程序

    你可能有一个小程序的想法,但它仍然是一个想法。对于开发人员来说,这是一项艰巨的任务,因为你必须确保你有足够的时间来开发你的第一个小程序。如果你决定使用小程序,那就有很多事情要做。创建一个小程序可能是一件非常耗时的事情。除了创建一个自己的小程序

    2024年02月10日
    浏览(79)
  • 从零开始创建一个vue3+vite项目并集成element-plus、eslint以及prettier

    项目git地址, 欢迎修改提交,不足地方还请补充批评指正! 项目git地址 ESLint 是一个用于识别和报告在 ECMAScript/JavaScript 代码中发现的模式的工具,其目标是使代码更加一致并避免错误。 ESLint 是完全插件化的。每条规则都是一个插件,你可以在运行时添加更多。你还可以添

    2024年04月09日
    浏览(77)
  • Java入门篇:打造你的Java开发环境——从零开始配置IDEA与Eclipse

    “工欲善其事,必先利其器” 作为每一位Java初学者的必经之路,搭建合适的开发环境是至关重要的第一步。本篇将详细指导你如何安装并配置两大主流Java开发工具——IntelliJ IDEA和Eclipse,助你在编程之旅上迈出坚实的第一步。 1. 下载并安装Java Development Kit (JDK) 步骤1 访问O

    2024年01月25日
    浏览(57)
  • 【SpringBoot】从零开始封装自己的starter并且引入到其他项目中使用

    简介 本文将介绍如何从零开始封装自己的starter并且引入到其他项目中使用 为什么要自己封装starter? 这样可以对spring以及其他第三方提供的starter做二次封装或者封装一些自己需要的内容提供给其他项目使用,提高项目级的代码复用性。 一、创建一个新的spring-boot项目 首先我

    2024年02月16日
    浏览(61)
  • 一篇SEO指南:新手如何从零开始优化自己的网站

    在如今的数字时代,拥有一个优化良好的网站对于任何企业或个人来说都是至关重要的。但是,对于SEO新手来说,如何从零开始优化自己的网站可能是一项看似艰巨的任务。在本文中,我们将为您提供一份SEO指南,帮助您了解从零开始优化自己的网站的过程。 确定您的目标关

    2024年02月02日
    浏览(112)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包