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之全家桶搭建项目 « 如何更好的使用弹窗? | 为什么设计概要对专业的创意过程至关重要»


蓝蓝 http://www.bjhbys.com

  1. 2019年10月(53)
  2. 2019年9月(48)
  3. 帝皇彩票官网2019年8月(63)
  4. 2019年7月(59)
  5. 帝皇彩票官网2019年6月(59)
  6. 2019年5月(31)
  7. 2019年4月(37)
  8. 2019年3月(43)
  9. 2019年2月(26)
  10. 2019年1月(45)
  11. 2018年12月(41)
  12. 2018年11月(40)
  13. 2018年10月(29)
  14. 2018年9月(40)
  15. 2018年8月(87)
  16. 帝皇彩票官网2018年7月(107)
  17. 2018年6月(86)
  18. 2018年5月(110)
  19. 2018年4月(40)
  20. 2018年3月(35)
  21. 2017年8月(35)
  22. 2017年7月(45)
  23. 2017年6月(7)
  24. 2017年5月(27)
  25. 2017年4月(51)
  26. 2017年3月(70)
  27. 2017年2月(65)
  28. 2017年1月(69)
  29. 帝皇彩票官网2016年12月(55)
  30. 2016年11月(111)
  31. 帝皇彩票官网2016年10月(92)
  32. 2016年9月(53)
  33. 2016年8月(9)
  34. 2016年7月(4)
  35. 2016年6月(9)
  36. 2016年3月(19)
  37. 2016年2月(26)
  38. 2016年1月(30)
  39. 2015年12月(33)
  40. 2015年11月(35)
  41. 2015年10月(46)
  42. 2015年9月(43)
  43. 2015年8月(40)
  44. 2015年7月(33)
  45. 帝皇彩票官网2015年6月(46)
  46. 帝皇彩票官网2015年5月(58)
  47. 2015年4月(70)
  48. 2015年3月(55)
  49. 2015年2月(17)
  50. 2015年1月(33)
  51. 2014年12月(21)
  52. 2014年11月(84)
  53. 2014年10月(94)
  54. 2014年9月(6)
  55. 2014年8月(1)
  56. 2014年7月(13)
  57. 2014年6月(66)
  58. 2014年5月(99)
  59. 2014年4月(88)
  60. 2014年3月(102)
  61. 2014年2月(68)
  62. 2014年1月(83)
  63. 2013年12月(106)
  64. 2013年11月(112)
  65. 帝皇彩票官网2013年10月(61)
  66. 2013年9月(20)
  67. 2013年7月(13)
  68. 2013年6月(27)
  69. 2013年5月(48)
  70. 2013年4月(39)
  71. 2013年3月(8)
  72. 2013年2月(20)
  73. 帝皇彩票官网2013年1月(31)
  74. 2012年12月(33)
  75. 2012年11月(31)
  76. 2012年10月(23)
  77. 2012年9月(8)
  78. 2012年7月(14)
  79. 2012年6月(15)
  80. 2012年5月(31)
  81. 2012年4月(24)
  82. 2012年2月(4)
  83. 2012年1月(8)
  84. 2011年12月(35)
  85. 2011年11月(32)
  86. 2011年10月(13)
  87. 2011年8月(1)
  88. 2011年6月(1)
订阅Rss
安徽快3走势 状元彩票计划 疯狂斗牛 桔子彩票注册 吉利彩票开奖 迪士尼彩乐园 安徽快3走势 状元彩票官网 迪士尼彩乐园官方网址 吉利彩票计划