Let’s build the project with Vue CLI family bucket

General projects will use these several, here will not introduce the concept in detail, just a simple use.

1. Set up the CLI

1. Install CNPM (Taobao image) in advance

npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy the code

2.cnpm install -g vue-cli

Install the VUE scaffolding tool globally. (Just download it once)

3.vue init webpack your_project_name

Create a scaffold project (required for each creation)

Eg: There is information on the command line that you need to fill in {your project name; Your project description; There are also plugins you want to download (y/n); }

4. Use NPM run dev to run the project

And just like that, a simple VUE development project template was downloaded.

Eg: I is short for install. Global installation dependencies:

CNPM I dependency nameCopy the code

Local install dependencies:

CNPM I -d Dependency nameCopy the code

Second, the vue – the router

Generally, the template has been installed before installation. You can see this in package.json. If not installed

cnpm i -D vue-router
Copy the code

After the installation, a router directory containing index.js is generated in the SRC directory. There are two configurations:

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
exportDefault new Router({routes: [//'/',
            redirect: '/index'
        },
        {
            path: '/',
            component: pather => require(['.. /components/common/bodys.vue'], pather),
            meta: { title: 'the body' },
            children:[
                {
                    path: '/index',
                    component: pather => require(['.. /components/page/index.vue'], pather),
                    meta: { title: 'System Home page' }
                },
                {
                    path: '/biaoge',
                    component: pather => require(['.. /components/page/biaoge.vue'], pather),
                    meta: { title: 'Basic table' }
                },
                {
                    path: '/Tab',
                    component: pather => require(['.. /components/page/Tab.vue'], pather),
                    meta: { title: 'TAB TAB' }
                },
                {
                    path: '/jibenbiaodan',
                    component: pather => require(['.. /components/page/jibenbiaodan.vue'], pather),
                    meta: { title: 'Basic Form' }
                },
                {
                    path: '/fuwenben',
                    component: pather => require(['.. /components/page/fuwenben.vue'], pather),
                    meta: { title: 'Rich text Editor' }
                },
                {
                    path: '/bianjiqi',
                    component: pather => require(['.. /components/page/bianjiqi.vue'], pather),
                    meta: { title: 'Markdown Editor' }    
                },
                {
                    path: '/shangchuan',
                    component: pather => require(['.. /components/page/shangchuan.vue'], pather),
                    meta: { title: 'File upload' }   
                },
                {
                    path: '/scharts',
                    component: pather => require(['.. /components/page/scharts.vue'], pather),
                    meta: { title: 'schart chart' }
                },
                {
                    path: '/tuozhuai',
                    component: pather => require(['.. /components/page/tuozhuai.vue'], pather),
                    meta: { title: 'Drag list' }
                },
                {
                    path: '/quanxianceshi',
                    component: pather => require(['.. /components/page/quanxianceshi.vue'], pather),
                    meta: { title: 'Permission Tests', permission: true }
                }             
            ]
        },
        {
            path: '/login',
            component: pather => require(['.. /components/page/login.vue'], pather)
        },

        {
            path: '/cuowu404',
            component: pather => require(['.. /components/page/cuowu404.vue'], pather)
        },
        {
            path: '/cuowu403',
            component: pather => require(['.. /components/page/cuowu403.vue'], pather)
        },
        {
            path: The '*',
            redirect: '/ 404'}], // remove# no.
mode:"history"
})

Copy the code

The second:

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})
Copy the code

Third, axios

First installation

cnpm i -D axios
Copy the code

Then write to main.js

import axios from 'axios'

Vue.prototype.$axios = axios
Copy the code

This allows you to use AXIos in the component to get the data

    loadData(){
            this.$axios.get(['https://free-api.heweather.com/v5/weather?city=qingdao&key=1b47b16e4aa545eaa55a66f859ac0089']) .then((response) => { // success console.log(response.data); }) .catch((error) => { //error console.log(error); })},Copy the code

Four, vuex

1, install,

cnpm i -D vuex
Copy the code

2. Create a folder named store in SRC and create store.js in store.

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--,
  }
})
Copy the code

3. Then import the registration in main.js

import Vuex from 'vuex'
import store from './store/store'

Vue.use(Vuex)

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})
Copy the code

For example, using vuex in headers. Vue

<template>
    <div class="headers">
     <p>{{count}}</p>
     <button @click="increment">+</button>
     <button @click="decrement">-</button>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'headers'.data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
        increment(){
          this.$store.commit('increment')},decrement(){
          this.$store.commit('decrement')
        }
  },
    computed:{
        count() {return this.$store.state.count
        },
    }

}
</script>
<style scoped lang="scss" >
</style>

Copy the code

Five, the sass

Install sass (1) install Node-sass (2) install sass (3) install style-loader (3) Install vue style-loader

cnpm install node-sass --save-dev 
cnpm install sass-loader --save-dev  
cnpm install style-loader --save-dev
Copy the code

2. Next you need to change webpack.base.config.js under the build folder

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('.. /config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve (dir) {
  return path.join(__dirname, '.. ', dir)
}



module.exports = {
  context: path.resolve(__dirname, '.. / '),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },
  resolve: {
    extensions: ['.js'.'.vue'.'.json'].alias: {
      'vue$': 'vue/dist/vue.esm.js'.The '@': resolve('src'),
    }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]}, {test: /\.(png|jpe? g|gif|svg)(\? . *)? $/, loader:'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')}}, {test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\? . *)? $/, loader:'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('media/[name].[hash:7].[ext]')}}, {test: /\.(woff2? |eot|ttf|otf)(\? . *)? $/, loader:'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]'}}, {// From this paragraph above is the default! Don't change! The following is nothing that you need to add manually, which is equivalent to compiler recognition of sass!test: /\.scss$/,
        loaders: ["style"."css"."sass"]
      }
    ]
  },
  node: {
    // prevent webpack from injecting useless setImmediate polyfill because Vue
    // source contains it (although only uses it if it's native). setImmediate: false, // prevent webpack from injecting mocks to Node native modules // that does not make sense for the client dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', child_process: 'empty'}}Copy the code

3. Write where you need to use sass

 <style lang="scss" scoped="" type="text/css"> 
 $primary-color: # 333;
   body {
        color: $primary-color;
       } 
</style>
Copy the code

Vi. Vue UI library

Take the well-known Element component library here element.eleme.cn/#/zh-CN/com…

1, install,

npm i element-ui -S
Copy the code

2. Use it to write to main.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Copy the code

3, and then in the component use can be: the wheel map

<template>
  <el-carousel indicator-position="outside">
    <el-carousel-item v-for="item in 4" :key="item">
      <h3>{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<style>
  .el-carousel__item h3 {
    color: # 475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  
  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
Copy the code

Summary: So much, any questions welcome to add wechat: Maomin9761