1.Vue Cli

1.1 installation

npm install -g @vue/cli-service-global
Copy the code

1.2 Starting a Single Service

vue serve Hello.vue
Copy the code

1.3 Creating a Project

vue create my-vue-test
Copy the code

1.4 Graphical project management

vue ui 
Copy the code

1.5 Adding plug-ins

vue add router
Copy the code

1.6 Processing Resource Paths

// Absolute path /
<img alt="Vue logo" src="/assets/logo.png"> < img Alt = "Vue logo" SRC = "http://www.baidu.com/assets/logo.png" > / / relative path. / < img Alt = "Vue logo" SRC = ". / assets/logo. PNG "> <img SRC ="~some-npm-package/foo. PNG "> Import Hello from '@/components/ hello.vue 'Import Hello from '@/components/ hello.vue'Copy the code

1.7 Advantages of Webpack packaging

  • Scripts and stylesheets are compressed and packaged together to avoid additional network requests.
  • Missing files report errors directly at compile time, rather than on the client.
  • The resulting file names contain content hashes, so you don’t have to worry about browsers caching older versions of them.

1.8 Public Resource folder

  • You need to specify a fixed file name in the build output.
  • You have thousands of images and need to dynamically reference their paths.
  • Some libraries may not be compatible with WebPack, except to use a separate library
module.exports = { publicPath: '/' } // The default is /
Copy the code

2.css

2.1 Installation and Use

// The module and loader must be installed at the same time# Sass npm install -D sass-loader node-sass # Less npm install -D less-loader less # Stylus npm install -D stylus-loader  stylus/ / use
<style scoped lang="scss">
$color: #42b983; a { color: $color; } 
</style>

// Automatic import styles, used to import some common style files, such as variables/mixins/functions, global information
// Install the style module +loader in advance, for example, 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))) 
        }, 
}
Copy the code

2.2 scope

/ / before transformation
<style scoped> .red { color: red; }</style>
/ / postCss after conversion
<template> <div class="red" data-v-f3f3eg9>hi</div> 
</template> 
<style>
.red[data-v-f3f3eg9] { color: red; }
</style>

// The component definition affects the whole world
<style>
/* Global style */ 
</style> 
// Only current is affected
<style scoped>
/* Local style */ 
</style>

// Depth selector: Use the >>> operator to make one of the selectors in scoped "deeper", such as influence<style scoped> #app >>> a {color: red }
</style>

// Note that Sass does not support >>>, you can use /deep/ or ::v-deep
<style scoped lang="scss">
#app { /deep/ a { 
            color: rgb(196.50.140) 
        }
        ::v-deep a { 
            color: rgb(196.50.140)}}</style>
Copy the code

2.3 CSS Module

<style module lang="scss">
.red {color: #f00; } .bold {font-weight: bold; } </style>// The template is accessed via $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>
/ / access in JS
<script> export default { 
created () { // An identifier generated based on the filename and class name
  console.log(this.$style.red) } 
}
</script>
Copy the code

3. Data access

//1. The analog interface returns data
devServer: {before(app) { 
        app.get('/api/users'.(req, res) = > { 
            res.json([{ name: 'xxx'.price: 111 }, { name: 'xxx2'.price: 
            222}}})})/ / 2. Axios request
/ / 3. The agent
devServer: { proxy: 'http://localhost:3000' }
//localhost:3000 is the address of another server
Copy the code