如何从零开始开发自己的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 全局安装过哪些包？

持续更新中.....