vue的脚手架Vue-cli

1、什么是Vue-cli ?

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板

2、为什么使用脚手架 ？

可以方便快速的搭建单页面应用，并且方便配置项目

3、脚手架安装步骤

· 1、全局安装vue

        cnpm  install  vue-cli -g    //--->一台电脑只需要下载一次

·2、查看vue的版本

        vue -V

·3、初始化项目(要进入项目的存储目录)

        vue init  webpack 项目名  //--->正式下载脚手架（每做一个项目，就需要下载一次，下载时，一路回车，会有一条是否下载路由，yes）

·4、进入项目

      cd 项目名称

·5、启动项目

     npm  run dev   

4、项目目录（简介）

    build webpack的配置文件目录
    config vue项目配置文件
    src 自己写的项目文件目录
    assets 可以存放一些静态的项目文件
    components 组件存放的空间
    router 路由配置目录
    app.vue 这个项目最外层的组件
    main.js 项目的入口文件

    static 也是存放一些静态的项目文件  json img css

5、static和assets的区别

共同点：都是存放静态资源文件
区别：在项目实用npm run build进行打包时会会将assets的目录中文件进行打包上传，staitc中的文件不会压缩，直接拷贝到上传目录的

6、什么是组件 ？

组件是按照ui界面来划分功能单位，每个功能单位都是独立的，包含样式(style) 行为(script) 结构（template）
**注意的是template里面有且只有一个子元素（div、p等）

7、定义子组件

1、进入src文件，在compoents中建立一个 **。vue的文件，在components中是可以添加目录
2、按照组件规范定子组件

新建VUE脚手架及组件.png

3、将子组件挂载到父组件上

挂载到父组件上.png

8、**注：在组件中data是一个函数，必须有return

9、在vue脚手架创建的项目中使用scss

1、下载依赖包

            cnpm  install node-sass sass-loader@7.3.1 -s 

2、在build文件中打开webpack.base.config.js在rules里面加上以下配置

    {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
    }

3、在<style lang="scss">

4、样式作用域 添加scoped属性

      <style lang="scss" scoped>
        //-->scoped作用就是组件多的话有的类名要是重复的话，它只在当前的组件有用，其他的组件没有作用
      </style>

欢迎留言，指正一些不足之处！！！