目录
构架Vue项目
Vue的生命周期
- vue实例在某一个时间点会自动执行这些函数;
- 生命周期钩子函数不允许写成箭头函数;
可以分为3个阶段,一共8个钩子:初始化阶段(创建前/后, 载入前/后)
运行中(更新前/后)
销毁(销毁前/销毁后)
npm
概念:nodejs的包管理器,用于node插件管理(包括安装、卸载、管理依赖等)
webpack
概念:前端自动化构建工具,它基于nodejs实现,可以帮助我们实现资源的合并、打包、压缩、混淆的诸多功能。可以快速构建一个Vue项目,包括各类文件(assets资源、scripts脚本、images图片、styles样式)。
Vue-cli脚手架安装
vue-cli是由Vue提供的一个官方cli,专门为单页面应用快速搭建繁杂的脚手架。它是用于自动生成vue.js+webpack的项目模板,是为现代前端工作流提供了 batteries-included 的构建设置。只需要几分钟的时间就可以运行起来并带有热重载,保存时 lint 校验,以及生产环境可用的构建版本
安装nodejs并验证
node -v # v8.11.3,至少8以上,最新的是v15.11.0
配置npm
npm config get registry # 查看当前配置的镜像,结果是默认的国外网址https://registry.npmjs.org/
npm config set registry https://registry.npm.taobao.org #设置成淘宝镜像
npm config get registry #再获取查看,结果是修改后的https://registry.npm.taobao.org/
参数
-i 安装指令,全拼: install
-S 生产环境,全拼: --save
-D 开发环境,全拼: --save—dev
-O 可选依赖,全拼: --save—optional
-E 精确安装指定模块版本,全称:--save—exact
-g 全局安装,全拼: --global
脚手架安装
npm install vue-cli -g #安装vue-cli脚手架---可能比较慢,要等几分钟
npm uninstall vue-cli -g #卸载vue-cli脚手架 --- 大可不必
vue –V #查看版本
where vue #vue安装在哪里
创建Vue项目 npm
设置一个工作空间
生成vue项目
vue init webpack jt01 #此处项目名不能使用大写---可能比较慢,要等
注意:
- jt01 为自定义的 项目名称
- 产生项目webpack模板,目录100+m,可见内容多复杂,庞大
- 会自动生成node_modules临时目录,可以删除,每次编译、运行会自动产生
测试访问
利用开发工具打开vue项目
- view 就是用户要访问的页面都存放在这个目录下,如Index.vue
- static中保存一些静态的资源,如jquery、css、图片等
- src 目录是一个很大的目录,包罗万象
- components 把项目中所需要的组件都放在此目录下
- router 访问的路径,Vue提倡的是SPA(Single Page WebApplication)单页面设计
重要文件说明
1, 在components里写自定义组件
2, 在App.vue里注册自定义组件
3, 在main.js里引入第三方js
index.html 首页,Vue是SPA单页面开发,页面入口,定义了一个div,并设置id=app
src/main.js 公共的组件就直接配置到这个文件中,私有的就配置到view中
src/App.vue 根组件,可以添加自定义组件
src/router/index.js 引入子组件HellWorld.vue
安装element-ui
官网:https://element.eleme.cn/#/zh-CN/component/installation
使用npm方式安装
npm i element-ui –D # 下载资料,这可能要等几分钟
常见错误
Permission denied
权限不足,windows以管理员身份运行,mac命令前加sudo
Unexpected end of JSON input while parsing near
清除缓存,重新安装
npm cache clean --force
npm install
unable to verify the first certificate
解决方法: 取消ssl验证:npm config set strict-ssl false,再次安装
vue-cli · Failed to download repo vuejs-templates/webpack: unable to verify the first certificate
打开(如果不是默认的文件夹, 是自定义的文件夹路径的话就是在自定义文件夹的目录下)
C:\Users\Administrator\AppData\Roaming\npm\node_modules\vue-cli\node_modules\download\index.js
将下面这行注释:rejectUnauthorized: process.env.npm_config_strict_ssl !== 'false'
然后改为: rejectUnauthorized : false
重新运行: vue init webpack project-name 就可以了