22.Vue脚手架工具：Vue CLI

最新推荐文章于 2024-04-18 22:08:57 发布

高新园养鸡场

最新推荐文章于 2024-04-18 22:08:57 发布

阅读量461

点赞数

分类专栏： Vue 2.0 文章标签： vue vue.js 前端

本文链接：https://blog.csdn.net/zyc3545/article/details/108507200

版权

Vue 2.0 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

简介

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>