追求卓越一諾千金

藍藍設計|_-拳王97电影,2011年成立--_初一下册数学期中试卷及答案,主創清華團隊-_镇赉吧,專注軟件和互聯網ui設計開發---众彩彩票管家。擅長企業信息化管理||周村二手房、監控--台湾身份证、大數據軟件UIUE谘詢和設計開發服務|_|雅马哈r6报价。立足UI_|_车四十四路事件原型,好好學習|夹心取力器,天天進步||-优胜彩票!


Vue cli之全家桶搭建項目

2019-8-19 釋然 前端及開發文章及欣賞


一|爱唯侦查发布器、搭建cli
1.事先安裝好cnpm(淘寶鏡像)

npm install -g cnpm --registry=https://registry.npm.taobao.org
1
2.cnpm install -g vue-cli

全局安裝vue腳手架工具---mc水观音擦皮鞋歌词。(下載一次就好)

3.vue init webpack your_project_name

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

eg:這時在命令行中有需要你填的信息{
你的項目名_|优彩网靠谱吗43167;
你的項目描述_|18136期大乐透开奖结果;
還有你想是否下載的插件(y/n)_优教信使忘记密码怎么办;
}

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

就這樣_|全球化的利弊,一個簡單的vue開發項目模板就這樣下載完成了|22选5河南最新开奖公告。

eg--智多星77238:
i 是install 的簡寫||众信彩票官网提不了款。
全局安裝依賴_-霍启仁antonia:

cnpm i   依賴名
1
局部安裝依賴-天弘基金余额宝计算器:

cnpm i -D  依賴名
1
二_-描写大自然的诗、vue-router
一般事先安裝模板時-|德国thomas锅具,已經安裝上了--_功夫小帅。
可以查看package.json中-|_注册的779彩票app怎么注销。
如果沒有安裝

cnpm i -D vue-router
1
安裝好之後-|_国产suv哪个好,在src目錄中會生成一個router目錄|_-亚洲区,裏麵放著index.js-抢拍手机,
一般有兩種配置
第一種-艾希tv:

import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
    routes: [
// 一進入就顯示頁麵
        {
            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: '係統首頁' }
                },
                {
                    path: '/biaoge',
                    component: pather => require(['../components/page/biaoge.vue'], pather),
                    meta: { title: '基礎表格' }
                },
                {
                    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: '權限測試', 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"
})


第二種-|得胜236:

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 獲取數據了

    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);
                })
        },

四-优行网交通违章查询、vuex
1__-歌手2017第五期、安裝

cnpm i -D vuex
1
2__|苏明星、然後需要手動創建一個文件夾store在src目錄當中-_97香港回归晚会,
接著在store文件夾中創建store.js
例|-_111cc彩票安卓:

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-_冯绍峰qq、然後在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>


五|-_142857真的能预测彩票、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]')
        }
      },
      { //從這一段上麵是默認的动感地带积分兑换商城!不用改||_花狸猫娱乐社区!下麵是沒有的需要你手動添加-__shuaitong,相當於是編譯識別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_-_140期富婆看图中肖特、在你需要使用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-|_361手机彩票登录入口、然後在組件使用就可以了
例|-_极地海洋世界门票:輪播圖

<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>
藍藍設計www.jwrumpff.com )是一家專注而深入的界麵設計公司-易点彩票手机版双色球,為期望卓越的國內外企業提供卓越的UI界麵設計__-金立gn105软件下载、BS界麵設計 |-金义大都市、 cs界麵設計 |-_掌上京彩app官方下载、 ipad界麵設計 __|至尊彩的网址是多少、 包裝設計 |_高清翡翠台、 圖標定製 ||安溪天气2345、 用戶體驗 |金根男爵、交互設計__-众彩是真是假、 網站建設 _|赛尔号光天使、平麵設計服務_-105彩票苹果版最新。
標簽: VUE cli之全家桶搭建項目 « 如何更好的使用彈窗-钟馗是谁? | 為什麼設計概要對專業的創意過程至關重要»


訂閱Rss