Vue项目

目录

构架Vue项目

Vue的生命周期

npm

webpack

Vue-cli脚手架安装

安装nodejs并验证

配置npm

参数

脚手架安装

创建Vue项目 npm

生成vue项目

测试访问

利用开发工具打开vue项目

重要文件说明

 安装element-ui

常见错误

---

构架Vue项目

Vue的生命周期

• vue实例在某一个时间点会自动执行这些函数；
• 生命周期钩子函数不允许写成箭头函数；

可以分为3个阶段，一共8个钩子：初始化阶段（创建前/后, 载入前/后）

                                                       运行中（更新前/后）

                                                       销毁（销毁前/销毁后）

npm

官网：https://www.npmjs.cn/

概念：nodejs的包管理器，用于node插件管理（包括安装、卸载、管理依赖等）

webpack

官网：https://webpack.js.org/

概念：前端自动化构建工具，它基于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  就可以了