-
时隔三年,在次手写一个vue项目,混迹于开发界已经快三年了,对写代码的认识也有了不少,那么现在再次从零开始,写一个VUE项目。
-
先把 webpack 弄好吧,现在已经 webpack5 了,那就来个 webpack5 吧。
-
对于一个已经使用 vue-cli 创建好的vue 项目,怎么快速添加webpck哩?
-
全局安装 /* npm i -g @vue/cli-init */ (这电脑不知道咋了,现在全局安装东西,都必须要以管理员身份运行cmd,TMD);
-
/* vue init webpack xxx */(xxx为项目名称)--- 是的,他就开始运行了,这一过程会让你做很多选择;
这个时候,我发现,原来上面的命令,是又给我生成了一个 项目,我tm,原来如此,好吧,删了从来。 3) 启动项目,在init项目的时候,使用了eslint 启动时会报了很多关于 eslint 检测的错,修改webpakc /* eslint-loader */ 里面的配置: fix: true; 项目成功启动;
-
目标:引入element-ui库;本地调用接口;做两个路由切换的页面;
- 安装element-ui ,执行命令:npm i element-ui -S;
- 项目中按需加载 需要借助 babel-plugin-component;执行命令: npm install babel-plugin-component -D
- 注意:
- 安装element-ui 官网给的配置,修改了babelrc文件,后项目需要执行如下命令: npm install babel-preset-es2015 --save-dev;
- 放弃了,还是全部引入吧,一个个的引入,太慢了。
官方指南;
1. 在失活的组件里调用 beforeRouteLeave 守卫。
2. 调用全局的 beforeEach 守卫。
3. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
4. 在路由配置里调用 beforeEnter。
5. 解析异步路由组件。
6. 在被激活的组件里调用 beforeRouteEnter。
7. 调用全局的 beforeResolve 守卫 (2.5+)。
8. 导航被确认。
9. 调用全局的 afterEach 钩子。
10. 触发 DOM 更新。
11. 调用 beforeRouteEnter 守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入。
安装 less 与 less-loader;
需要在引入iconfont.css文件的同时,还要引入该文件中对应的 三个文件。
将 iconfont.css 在全局的css 文件中引入
计划:让音乐响起来
1.在vue中写函数式组件; 2.在vue中使用jsx 写法; jsx 和react一样,是一种语法,所以需要安装对应的babel; ++安装对应的依赖++ npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props 使用 jsx 的函数式组件;
练习使用vuex