让我们用Vue cli全家桶搭建项目

梦里梦外; 2021-09-19 09:18 317阅读 0赞

一般项目都会用到这几个，这里不在详细介绍概念，只是简单的使用。

## 一、搭建cli ##

**1.事先安装好cnpm(淘宝镜像)**

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

**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   依赖名

局部安装依赖：

cnpm i -D  依赖名

## 二、vue-router ##

一般事先安装模板时，已经安装上了。  
可以查看package.json中。  
如果没有安装

cnpm i -D vue-router

安装好之后，在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

然后在main.js写入

import axios from 'axios'
    
    Vue.prototype.$axios = axios

这样就可以在组件中使用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

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

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

**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的地方写入即可**

## 六、vue UI库 ##

这里已著名的Element组件库为例  
https://element.eleme.cn/\#/zh-CN/component/carousel

**1、安装**

npm i element-ui -S

**2、使用**  
在main.js写入

import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css'
    
    Vue.use(ElementUI)

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

总结：就这么多了，有什么疑问欢迎添加微信：maomin9761