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

发布时间:2023-07-27 18:00

原文地址:如何从零开始开发自己的vue项目,从零开始打造自己第一个工程化的前端项目,vue-admin项目?_Vue_学无止境_广州建站小戴BOTAO博客

从零开始开发vue项目


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

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

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

前置要求


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

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

\"image.png\"

2、安装代码编辑器 Visual Studio

\"image.png\"

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

初始化项目 或者 创建项目


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

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

npm init -y

\"如何从零开始开发自己的vue项目,打造自己第一个工程化的前端项目_第1张图片\"

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




    
    
    
    Vue-admin


    

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 全局安装过哪些包?

持续更新中.....

相关推荐

持续关注突发,数据库运维应该关注哪些潜在风险?

Win11安装VMware后打开虚拟机蓝屏的解决方法

接口开发-restful

【SSM】Spring系列——Spring概述、第一个Spring程序、容器接口和实现类

如何查看windows中安装的CUDA版本(无需配置环境变量)

C语言 函数——反序输出字符串

Docker的基本操作——容器操作

深度强化学习极简入门(一)——强化学习发展历史简述

在Kubernetes上部署Spring Boot微服务实践

vue 路由跳转携带参数

电商商品同款识别图像算法研究

Google 表格脚本:为表格添加自定义公式

给你 2 万条数据,怎么快速导入到 MySQL?写得太好了!

yolov5模型配置yaml文件详解

微软将通过Windows Update提供新的杀毒软件

SpringBoot项目中如何实现MySQL读写分离详解

Git commit操作之后找不到提交记录

Windows下安装Redis图文教程

[计算机网络]——第六章 物理层

Tomcat、zookeeper、Redis的配置

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号