Day197，【程序员必看】，web项目二次开发

• 通过 vue-cli 搭建交互式的项目脚手架。bootstrap css js jquery js 通过执行命令方式下载相关依赖

• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发 vue页面 vuejs vuerouter axios(一条命令)

• 一个运行时依赖 (@vue/cli-service)，该依赖：

• 可升级； 一条命令

• 基于 webpack 构建，并带有合理的默认配置； webpack 项目打包方式 编译好的项目源码===>部署到服务器上直接使用

• 可以通过项目内的配置文件进行配置； 默认配置文件,通过修改默认配置文件达到自己想要的项目环境

• 可以通过插件进行扩展。 vue v-charts elementui

• 一个丰富的官方插件集合，集成了前端生态中最好的工具。Nodejs(tomcat) Vue VueRouter webpack yarn

• 一套完全图形化的创建和管理 Vue.js 项目的用户界面

14.4 Vue CLI安装

1. 环境准备

1.下载nodejs

http://nodejs.cn/download/

windows系统: .msi 安装包(exe)指定安装位置 .zip(压缩包)直接解压缩指定目录

mac os 系统: .pkg 安装包格式自动配置环境变量 .tar.gz(压缩包)解压缩安装到指定名

2.配置nodejs环境变量

【windows系统】

计算上右键属性----> 高级属性 ---->环境变量 添加如下配置:

NODE_HOME= nodejs安装目录

PATH = xxxx;%NODE_HOME%

【macos系统】

推荐使用.pkg安装直接配置node环境

3.验证nodejs环境是否成功

node -v

4.npm介绍

（node package mangager） ==>【nodejs包管理工具】 前端主流技术 npm 进行统一管理

• maven 管理java后端依赖 远程仓库(中心仓库) 阿里云镜像

• npm 管理前端系统依赖 远程仓库(中心仓库) 配置淘宝镜像

5.配置淘宝镜像

npm config set registry https://registry.npm.taobao.org

npm config get registry 【验证配置是否成功】

6.配置npm下载依赖位置

windows:

npm config set cache “D:\Program Files\npm-cache”

npm config set prefix “D:\Program Files\npm_global”

mac os:

npm config set cache “/Users/chenyannan/dev/nodereps”

npm config set prefix “/Users/chenyannan/dev/nodereps”

7.验证nodejs环境配置

npm config ls

; userconfig C:\Users\PePe.npmrc

cache = “D:\Program Files\npm-cache”

prefix = “D:\Program Files\npm_global”

registry = “https://registry.npm.taobao.org/”

2.安装脚手架

0.卸载脚手架

npm uninstall -g @vue/cli //卸载3.x版本脚手架

npm uninstall -g vue-cli //卸载2.x版本脚手架

1.Vue Cli官方网站

https://cli.vuejs.org/zh/guide/

2.安装vue Cli

npm install -g vue-cli

3.配置vue环境变量

D:\Program Files\npm_global\

3.第一个vue脚手架项目

0.安装模板

npm install -g 【模板名】

npm install -g webpack

1.创建vue脚手架第一个项目

vue init webpack 【项目名】

vue init webpack hello

2.创建第一个项目

hello ------------->项目名

-build ------------->用来使用webpack打包使用build依赖

-config ------------->用来做整个项目配置目录

-node_modules ------>用来管理项目中使用依赖

-src ------>用来书写vue的源代码【重点】

assets ------>用来存放静态资源 【重点】

components ------>用来书写Vue组件 【重点】

router ------>用来配置项目中路由【重点】

App.vue ------>项目中根组件【重点】

main.js ------>项目中主入口【重点】

-static ------>其它静态

-.babelrc ------> 将es6语法转为es5运行

-.editorconfig ------> 项目编辑配置

-.gitignore ------> git版本控制忽略文件

-.postcssrc.js ------> 源码相关js

-index.html ------> 项目主页

-package.json ------> 类似与pom.xml 依赖管理 jquery 不建议手动修改

-package-lock.json ----> 对package.json加锁

-README.md ----> 项目说明文件

3.如何运行在项目的根目录中执行

npm start 运行前端系统

4.如何访问项目

http://localhost:8080

5.Vue Cli中项目开发方式

注意: 一切皆组件

一个组件中：

【

js代码

html代码

css样式

】

1. VueCli开发方式是在项目中开发一个一个组件对应一个业务功能模块,日后可以将多个组件组合到一起形成一个前端系统

2. 日后在使用vue Cli进行开发时不再书写html,编写的是一个个组件(组件后缀.vue结尾的文件),日后打包时vue cli会将组件编译成运行的html文件

访问http://localhost:8080/

4.如何开发Vue脚手架

注意:在Vue cli 中一切皆组件

• components文件夹下 存放组件

Footer.vue:↓↓↓

我是页脚 @阿昌学Vue 我是阿昌

Home.vue：↓↓↓

主页组件

内容

Student.vue：↓↓↓

学生模块

id name age 操作 {{student.id}} {{student.name}} {{student.age}}

删除

修改

User.vue：↓↓↓

用户模块

id name age 操作 {{user.id}} {{user.name}} {{user.age}}

删除

修改

• router/index.js 设置路由

import Vue from ‘vue’ //引入组件

import Router from ‘vue-router’ //引入组件

import Home from “…/components/Home” //引入组件

import User from “…/components/User” //引入组件

import Stduent from ‘…/components/Student’ //引入组件

Vue.use(Router)

export default new Router({

routes: [

{path: ‘/’,redirect:“/home”}, //默认路由

{path:‘/user’,component: User},

{path:‘/home’,component: Home},

{path:‘/student’,component: Stduent}

]

})

• App.vue 主页面的展示

用户模块

主页模块

学生模块

• main.js

import Vue from ‘vue’ //在页面中引入vue.js

import App from ‘./App’ //引入自定义组件

import router from ‘./router’ //引入vue route js

Vue.config.productionTip = false

new Vue({ //vue全局实例

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！**
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-B9AD0AFf-1710767066230)]
[外链图片转存中…(img-rzxYa4Xs-1710767066231)]
[外链图片转存中…(img-2OBgcgt0-1710767066232)]
[外链图片转存中…(img-D4NGhyFd-1710767066232)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-7sJIHthg-1710767066233)]

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

[外链图片转存中…(img-U9ZhE0Fg-1710767066234)]