Vue cli之全家桶搭建项目 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足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脚手架工具。(下载一次就好)

3.vue init webpack your_project_name

创建一个脚手架项目(每次创建需要)

eg:这时在命令行中有需要你填的信息{
你的项目名;
你的项目描述;
还有你想是否下载的插件(y/n);
}

4.使用 npm run dev来运行项目

就这样,一个简单的vue开发项目模板就这样下载完成了。

eg:
i 是install 的简写。
全局安装依赖:

cnpm i   依赖名
1
局部安装依赖:

cnpm i -D  依赖名
1
二、vue-router
一般事先安装模板时,已经安装上了。
可以查看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: [
// 一进入就显示页面
        {
            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"
})


第二种:

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、安装

cnpm i -D vuex
1
2、然后需要手动创建一个文件夹store在src目录当中,
接着在store文件夹中创建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]')
        }
      },
      { //从这一段上面是默认的!不用改!下面是没有的需要你手动添加,相当于是编译识别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-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.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计  cs界面设计  ipad界面设计  包装设计  图标定制  用户体验 、交互设计、 网站建设 平面设计服务
标签: VUE cli之全家桶搭建项目 « 如何更好的使用弹窗? | 帝皇彩票官网为什么设计概要对专业的创意过程至关重要»


订阅Rss
帝皇彩票登陆 福建快3 大象彩票计划 博发彩票开奖 河北快3开奖 状元彩票计划 浙江11选5 安徽快3走势 福建11选5官网 迪士尼彩乐园平台