超碰av在线|无码精品一区二区三区在线|伊人色色日韩一级片内射视频群批_欧美丰满少妇人妻HD高清在线_亚洲一区二区中文_亚洲无码动漫专区

Vue cli之全家桶搭建項目

2019-8-19    seo達(dá)人

一、搭建cli

1.事先安裝好cnpm(淘寶鏡像)



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

1

2.cnpm install -g vue-cli



全局安裝vue腳手架工具。(下載一次就好)



3.vue init webpack your_project_name



創(chuàng)建一個腳手架項目(每次創(chuàng)建需要)



eg:這時在命令行中有需要你填的信息{

你的項目名;

你的項目描述;

還有你想是否下載的插件(y/n);

}



4.使用 npm run dev來運行項目



就這樣,一個簡單的vue開發(fā)項目模板就這樣下載完成了。



eg:

i 是install 的簡寫。

全局安裝依賴:



cnpm i   依賴名

1

局部安裝依賴:



cnpm i -D  依賴名

1

二、vue-router

一般事先安裝模板時,已經(jīng)安裝上了。

可以查看package.json中。

如果沒有安裝



cnpm i -D vue-router

1

安裝好之后,在src目錄中會生成一個router目錄,里面放著index.js,

一般有兩種配置

第一種:



import Vue from 'vue';

import Router from 'vue-router';

Vue.use(Router);

export default new Router({

    routes: [

// 一進(jìn)入就顯示頁面

        {

            path: '/',

            redirect: '/index'

        },

        {

            path: '/',

            component: pather => require(['../components/common/bodys.vue'], pather),

            meta: { title: '主體' },

            children:[

                {

                    path: '/index',

                    component: pather => require(['../components/page/index.vue'], pather),

                    meta: { title: '系統(tǒng)首頁' }

                },

                {

                    path: '/biaoge',

                    component: pather => require(['../components/page/biaoge.vue'], pather),

                    meta: { title: '基礎(chǔ)表格' }

                },

                {

                    path: '/Tab',

                    component: pather => require(['../components/page/Tab.vue'], pather),

                    meta: { title: 'tab選項卡' }

                },

                {

                    path: '/jibenbiaodan',

                    component: pather => require(['../components/page/jibenbiaodan.vue'], pather),

                    meta: { title: '基本表單' }

                },

                {

                    path: '/fuwenben',

                    component: pather => require(['../components/page/fuwenben.vue'], pather),

                    meta: { title: '富文本編輯器' }

                },

                {

                    path: '/bianjiqi',

                    component: pather => require(['../components/page/bianjiqi.vue'], pather),

                    meta: { title: 'markdown編輯器' }    

                },

                {

                    path: '/shangchuan',

                    component: pather => require(['../components/page/shangchuan.vue'], pather),

                    meta: { title: '文件上傳' }   

                },

                {

                    path: '/scharts',

                    component: pather => require(['../components/page/scharts.vue'], pather),

                    meta: { title: 'schart圖表' }

                },

                {

                    path: '/tuozhuai',

                    component: pather => require(['../components/page/tuozhuai.vue'], pather),

                    meta: { title: '拖拽列表' }

                },

                {

                    path: '/quanxianceshi',

                    component: pather => require(['../components/page/quanxianceshi.vue'], pather),

                    meta: { title: '權(quán)限測試', 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: '*',

            redirect: '/404'

        }

    ],

// 去掉#號

mode:"history"

})





第二種:



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

    }

  ]

})



三、axios

先安裝



cnpm i -D axios

1

然后在main.js寫入



import axios from 'axios'



Vue.prototype.$axios = axios

1

2

3

這樣就可以在組件中使用axios 獲取數(shù)據(jù)了



    loadData(){

            this.$axios.get(['
                .then((response) => {

                    // success

                    console.log(response.data);

                })

                .catch((error) => {

                    //error

                    console.log(error);

                })

        },



四、vuex

1、安裝



cnpm i -D vuex

1

2、然后需要手動創(chuàng)建一個文件夾store在src目錄當(dāng)中,

接著在store文件夾中創(chuàng)建store.js

例:



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--,

  }

})

1

2

3

4

5

6

7

8

9

10

11

12

13

3、然后在main.js引入注冊



import Vuex from 'vuex'

import store from './store/store'



Vue.use(Vuex)



new Vue({

  el: '#app',

  router,

  store,

  components: { App },

  template: '<App/>'

})



比如在headers.vue使用vuex



<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>





五、sass

1、需要安裝sass

(1)安裝node-sass

(2)安裝sass-loader

(3)安裝style-loader 有些人安裝的是 vue-style-loader 其實是一樣的!



cnpm install node-sass --save-dev 

cnpm install sass-loader --save-dev  

cnpm install style-loader --save-dev

1

2

3

2、接著需要更改build文件夾下面的webpack.base.config.js



'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',

      '@': 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]')

        }

      },

      { //從這一段上面是默認(rèn)的!不用改!下面是沒有的需要你手動添加,相當(dāng)于是編譯識別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'

  }

}





3、在你需要使用sass的地方寫入即可



 <style lang="scss" scoped="" type="text/css"> 

 $primary-color: #333; 

   body {

        color: $primary-color;

       } 

</style>



六、vue UI庫

這里已著名的Element組件庫為例

https://element.eleme.cn/#/zh-CN/component/carousel



1、安裝



npm i element-ui -S

1

2、使用

在main.js寫入



import ElementUI from 'element-ui'

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



Vue.use(ElementUI)

1

2

3

4

3、然后在組件使用就可以了

例:輪播圖



<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-carouselitem 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>

藍(lán)藍(lán)設(shè)計www.miumiuwan.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制  用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)。

分享本文至:

日歷

鏈接

個人資料

藍(lán)藍(lán)設(shè)計的小編 http://www.miumiuwan.com

存檔