9 Vue CLI 3
9.1 基本使用
vue-cli 3 与 2 版本有很大区别
vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3
vue-cli 3 的设计原则是“0配置”,移除的配置文件根目录下的,build和config等目录
vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化
移除了static文件夹,新增了public文件夹,并且index.html移动到public中
琐碎知识点补充
vue2.5.21 -> vue2.x -> flow-type(facebook
Vue3.x -> TypeScript(micro(微小)soft(软件))
rc -> run command(后缀名中带有rc)
vcs -> version control system(版本控制git/svn)
Vue CLI 3 创建项目
vue create 项目名称
- 目录结构详情
- 运行(查看package.json文件中的script标签)
npm run serve
- vue cli3中main.js文件中的,
vm.$mount('#app')
挂载dom的方式和el:'#app'
方式是一样的
1 | new Vue({ |
9.2 Vue CLI3中的配置文件
方式1:Vue CLI3中的配置文件
- Vue-CLI3的配置通过命令
vue ui
打开本地服务器进行管理,- 在浏览器中进行配置文件的操作,内部可以进行文件插件安装服务器的启动等
- 隐藏的配置文件都在Service.js文件中
- Vue-CLI3的配置通过命令
方式2:自定义配置文件:在根目录下创建vue.config.js自定义配置文件(文件夹名称是固定的)
- 自定义的配置文件会和脚手架创建的配置文件进行合并的
箭头函数补充
- 普通函数:setTimeout中的this指向的是window,function定义的函数中的this默认调用的是call函数指向当前对象
- 箭头函数中的this引用的是最近作用域中的this
1 | // 字面量对象中定义 |
Element-UI插件的基本使用
- Element-UI:一套基于2.0的桌面端组件库
官网地址:http://element-cn.eleme.io/#/zh-CN
安装方式:
npm安装
安装:
npm install element-ui -S
导入使用:
1
2
3
4
5
6
7
8
9
10
11//导入组件
import ElementUI from "element-ui";
//导入样式
import "element-ui/lib/theme-chalk/index.css";
//安装插件
Vue.use(ElementUI)
本文链接: https://sparkparis.github.io/2020/05/13/Vue%E7%AC%94%E8%AE%B06/
版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!