-
通过
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样式
】
-
VueCli开发方式是在项目中开发一个一个组件对应一个业务功能模块,日后可以将多个组件组合到一起形成一个前端系统
-
日后在使用vue Cli进行开发时不再书写html,编写的是一个个组件(组件后缀.vue结尾的文件),日后打包时vue cli会将组件编译成运行的html文件
访问http://localhost:8080/
4.如何开发Vue脚手架
注意:在Vue cli 中一切皆组件
- components文件夹下 存放组件
Footer.vue:↓↓↓
我是页脚 @阿昌学Vue 我是阿昌
Home.vue:↓↓↓
主页组件
内容
Student.vue:↓↓↓
学生模块
![](../assets/logo.png)
User.vue:↓↓↓
用户模块
- 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无偿领取!(备注:前端)
最后
除了简历做到位,面试题也必不可少,整理了些题目,前面有117道汇总的面试到的题目,后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。
效又漫长,而且极易碰到天花板技术停滞不前!**
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-oyehFe02-1710767137724)]
[外链图片转存中…(img-HaZwJHZ6-1710767137725)]
[外链图片转存中…(img-5glVfnxz-1710767137725)]
[外链图片转存中…(img-TCIE7ik7-1710767137726)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频
如果你觉得这些内容对你有帮助,可以添加下面V无偿领取!(备注:前端)
[外链图片转存中…(img-JzJ3DJSu-1710767137727)]
最后
除了简历做到位,面试题也必不可少,整理了些题目,前面有117道汇总的面试到的题目,后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。