简介
vue-cli是脚手架工具,运行在node.js环境下,使用npm作为依赖包管理工具,其作用就是用配置好的模板迅速搭建起一个项目工程来,省去自己配置webpack配置文件的基本内容。
配置
安装命令:
npm install -g @vue/cli
管理项目命令,可以用下方命令打开图形化界面管理项目,或者用 vue create my-project 命令行创建项目:
vue ui
使用
创建项目
打开图形化管理界面后。
创建新项目。
推荐使用手动模式创建项目。
管理项目
创建完成后可在插件页面增删插件,有在线搜索功能。
依赖管理同上,可以在线搜索一些流行库。
项目配置。
任务,可以查看项目状态,执行启动/打包操作。
项目结构
通过Vue CLI创建的项目目录结构。
├──dist #用于存放使用 npm run build 命令打包的项目文件
├──node_modules #用于存放我们项目的各种依赖
├──public #用于存放静态资源
├──public/index.html #是一个模板文件,作用是生成项目的入口文件。浏览器访问项目的时候就会默认打开的是生成好的index.html。
├──src #是存放各种vue项目文件的地方。
├──src/assets #用于存放着各种静态文件,比如图片。
├──src/components #用于存放我们的公共组件,比如header、footer等。
├──src/router/index.js #vue-router路由文件。需要引入src/views文件夹下的.vue,配置path、name、component。
├──src/store/index.js #是vuex的文件,主要用于项目里边的一些状态保存。比如state、mutations、actions、getters、modules。
├──src/views #用于存放我们写好的各种页面,比如Login.vue,Home.vue。
├──src/App.vue #是主vue模块,主要是使用router-link引入其他模块,App.vue是项目的主组件,所有的页面都是在App.vue下切换的。
├──src/main.js #入口文件,主要作用是初始化vue实例,同时可以在此文件中引用某些组件库或者全局挂载一些变量。
├──.gitignore #配置git上传想要忽略的文件格式。
├──babel.config.js #是一个工具链,主要用于在当前和较旧的浏览器或环境中将ES6的代码转换向后兼容(低版本ES)。
├──package.json #模块基本信息项目开发所需要的模块,版本,项目名称。
├──package-lock.json #是在npm install时候生成的一份文件,用于记录当前状态下实际安装的各个npm package的具体来源和版本号
静态资源
public和assets放静态资源怎么选择?
相同点:
两个目录都可以用来放置静态资源。
不同点:
public目录用来放不会变动的文件,打包时不经过webpack处理,打包后会被直接复制到dist文件夹(public路径配置见官网),需要使用绝对路径来引用这些文件。
assets目录用来放可能会变动的文件,会被webpack file-loader解析为模块依赖,需要使用相对路径来引用对应文件。
建议:
将一些外部第三方的文件以及项目上传的文件放在public中,自己的文件放在assets中。
图片引用时,放在public和assets都可以,需要注意的是,在动态绑定中,assets路径的图片会加载失败(webpack采用commenJS规范,必须使用require引入)。
修改样式
scoped
样式文件被保存在*.vue中,如果直接在里面写样式,会全局生效,必须加入scoped字段才会使得样式只在本组件生效。
//App.vue
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
</div>
<router-view/>
</div>
</template>
<style scoped> //如果不加scoped,下面样式对所有*.vue都有效
button {
background: green;
}
</style>
scoped的原理:
- 给HTML的DOM节点加一个不重复属性data-v-469af010标志唯一性
- 在添加scoped属性的组件的每个样式选择器后添加一个等同与“不重复属性”相同的字段,实现类似于“作用域”的作用,不影响全局
- 如果组件内部还有组件,只会给最外层的组件里的标签加上唯一属性字段,不影响组件内部引用的组件( 注意 )
从原理可见,之所以scoped可达到类似组件私有化、样式设置“作用域”的效果,其实只是在设置scoped属性的组件上的所有标签添加一的data开头的属性,且在标签选择器的结尾加上和属性同样的字段,起到唯一性的作用,但是这样如果组件中也引用其他组建就会出现类似下面的问题:
- 父组件无scoped属性,子组件带有scoped,父组件是无法操作子组件的样式的,虽然我们可以在全局中通过该类标签的标签选择器设置样式,但会影响到其他组件。
- 父组件有scoped属性,子组件无,父组件也无法设置子组件样式,因为父组件的所有标签都会带有data-v-469af010唯一标志,但子组件不会带有这个唯一标志属性,虽然我们可以在全局中通过该类标签的标签选择器设置样式,但会影响到其他组件。
- 父子组建都有,同理也无法设置样式,更改起来增加代码量。
穿透scoped
在很多项目中,会出现这么一种情况,即:引用了第三方组件,需要在组件中局部修改第三方组件的样式,而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式,穿透scoped。通过 >>> 可以使得在使用scoped属性的情况下,穿透scoped,修改其他组件的值。
<style scoped>
外层 >>> 第三方组件 {
样式
}
</style>
多个style标签实现穿透
穿透方法实际上违反了scoped属性的意义,要修改外部样式还拥有一种曲线救国的方法,即在定义一个含有scoped属性的style标签之外,再定义一个不含有scoped属性的style标签,即在一个vue组件中定义一个全局的style标签,一个含有作用域的style标签。
<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>