1.Vue Cli

1.1安装

npm install -g @vue/cli-service-global

1.2启动单个服务

vue serve Hello.vue

1.3创建项目

vue create my-vue-test

1.4图形化管理项目

vue ui 

1.5添加插件

vue add router

1.6处理资源路径

//绝对路径/
<img alt="Vue logo" src="/assets/logo.png">
<img alt="Vue logo" src="http://www.baidu.com/assets/logo.png">

//相对路径./
<img alt="Vue logo" src="./assets/logo.png">

//模块方式请求，可以引用 Node 模块中的资源
<img src="~some-npm-package/foo.png">

//相对根路径@， Vue CLI 默认会设置一个指向 src 的别名
import Hello from '@/components/Hello.vue'

1.7webpack打包的优势

• 脚本和样式表会被压缩且打包在一起，从而避免额外的网络请求。
• 文件丢失会直接在编译时报错，而不是到了用户端才产生 404 错误。
• 最终生成的文件名包含了内容哈希，因此你不必担心浏览器会缓存它们的老版本。

1.8public资源文件夹

• 你需要在构建输出中指定一个固定的文件名字。
• 你有上千个图片，需要动态引用它们的路径。
• 有些库可能和 webpack 不兼容，除了将其用一个独立的

module.exports = { publicPath: '/' } //默认为 /

2.css

2.1安装与使用

//需要同时安装模块 和 对应的loader
# Sass 
npm install -D sass-loader node-sass 
# Less 
npm install -D less-loader less
# Stylus 
npm install -D stylus-loader stylus
//使用
<style scoped lang="scss">
$color: #42b983; a { color: $color; } 
</style>

//自动化导入样式，用于，导入一些公共的样式文件，比如：variables / mixins / functions，全局信息
//提前需要先安装 样式模块+loader 如：sass-loader node-sass 
npm i -D style-resources-loader

const path = require('path') 
function addStyleResource(rule) { 
        rule.use('style-resource') 
        .loader('style-resources-loader') 
        .options({ 
            patterns: [ 
                path.resolve(__dirname, './src/styles/imports.scss'), 
            ],
        })
    }
    module.exports = { 
        chainWebpack: config => { 
            const types = ['vue-modules', 'vue', 'normal-modules', 'normal'] 
            types.forEach(type => 
                addStyleResource(config.module.rule('scss').oneOf(type))) 
        }, 
}

2.2作用域

//转化前
<style scoped> .red { color: red; }</style>
//postCss 转化后
<template> <div class="red" data-v-f3f3eg9>hi</div> 
</template> 
<style>
.red[data-v-f3f3eg9] { color: red; }
</style>

//在组件定义会影响全局
<style>
/* 全局样式 */ 
</style> 
//只影响当前
<style scoped>
/* 本地样式 */ 
</style>

//深度作用选择器：使用 >>> 操作符可以使 scoped 样式中的一个选择器能够作用得“更深”，例如影响
子组件,下面代码可以影响当前组件的子组件
<style scoped>
#app >>> a { color: red }
</style>

//注意Sass  不支持 >>> ，可以使用 /deep/ 或 ::v-deep
<style scoped lang="scss">
#app { /deep/ a { 
            color: rgb(196, 50, 140) 
        }
        ::v-deep a { 
            color: rgb(196, 50, 140) 
         }
   }
</style>

2.3 CSS Module

<style module lang="scss">
.red {color: #f00;}
.bold {font-weight: bold;}
</style>
//模板中通过$style.xx访问
<a :class="$style.red">awesome-vue</a> 
<a :class="{[$style.red]:isRed}">awesome-vue</a>
<a :class="[$style.red, $style.bold]">awesome-vue</a>
//JS中访问
<script> export default { 
created () { // 一个基于文件名和类名生成的标识符  
  console.log(this.$style.red) } 
}
</script>

3.数据访问

//1.模拟接口返回数据
devServer:{ 
    before(app) { 
        app.get('/api/users', (req, res) => { 
            res.json([{ name: 'xxx', price: 111 }, { name: 'xxx2', price: 
            222 }])
        }) 
    } 
}
//2.axios请求
//3.代理
devServer: { proxy: 'http://localhost:3000' }
//localhost:3000是其他服务器地址