Vue模板与常用组件依赖

╰+哭是因爲堅強的太久メ 2021-09-16 16:48 394阅读 0赞

使用webpack模板
    
    vue init webpack my-project
    
    本文示例运行于vue-cli(v2.8.1),命令行提示如下：
    
    ? Project name (my-project) //请输入项目名称，回车默认
    
    ? Project description (A Vue.js project) //请输入项目描述，回车默认
    
    ? Author xsl <398818817@qq.com> //请输入作者名，回车默认
    
    ? Vue build //请选择构建模式，请直接回车选择第一条
    
    > Runtime + Compiler: recommended for most users
    
    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific
    
    HTML) are ONLY allowed in .vue files - render functions are required elsewhere
    
    ? Install vue-router? Yes //是否安装vue-router,回车
    
    ? Use ESLint to lint your code? Yes //是否安装ESLint代码检查器，回车
    
    //个人比较偏爱airbnb的编码规范，此处选择第二项
    
    Standard (https://github.com/feross/standard)
    
    >AirBNB (https://github.com/airbnb/javascript)
    
    none (configure it yourself)
    
    ? Setup unit tests with Karma + Mocha? Yes //单元测试，请按需选择
    
    ? Setup e2e tests with Nightwatch? Yes //端到端测试，请按需选择
    
    如果对于eslint报错并不明白的，可以参考eslint官方文档提供ESLint代码检查规则索引;
    
    
    
    
    
    安装依赖 :  cnpm  install 
    
    
    
    1.Vue引入jquery
    使用命令cnpm install jquery --save-dev 安装jquery。
    
    
    
    --save-dev表示自动添加配置依赖到package.json文件的devDependencies中,开发环境
    
    如果只加--save表示自动添加配置依赖到package.json文件的dependencies中，生产环境
    
    
    
    在webpack.base.conf.js中添加如下内容：
    
    var webpack = require('webpack')
    
    和
    
    plugins: [
    
    new webpack.ProvidePlugin({
    
    $: "jquery",
    
    jQuery: "jquery"
    
    })
    
    ],
    
    在main.js中配置全局配置
    
    import $ from 'jquery'
    
    
    
    2.Vue引入bootstrap
    安装bootstrap，使用命令npm install bootstrap --save-dev
    
    在main.js中添加如下内容：
    
    import 'bootstrap/dist/css/bootstrap.min.css'
    
    import 'bootstrap/dist/js/bootstrap.min'
    
    
    
    3.引入Less
    1.安装less和less-loader  : 命令：cnpm install less less-loader --save
    
    2.配置less: 路径：build---webpack.base.conf.js添加
    
    {
    
    test: /\.less$/,
    
    loader: 'style-loader!css-loader!less-loader'
    
    }
    
    
    
    4.引入swiper
    
        
    
        cnpm install swiper --save-dev
    
    在mins中引入
    
    import 'swiper/dist/css/swiper.css';
    
    插件在哪写在哪引入
    
    import Swiper from 'swiper';
    
    
    
    5,Mint UI：安装
    
    cnpm i mint-ui --save
    
    cnpm install --save moment //时间格式化插件安装
    
    main.js中写入:
    
    import Mint from 'mint-ui';
    
    Vue.use(Mint);
    
    import 'mint-ui/lib/style.css';
    
    
    
    6,Element：安装
    
    cnpm i element-ui -S
    
    cnpm install babel-plugin-component -D
    
    main.js中写
    
    import ElementUI from 'element-ui'
    
    import '../node_modules/element-ui/lib/theme-chalk/index.css'
    
    Vue.use(ElementUI);
    
    
    
    7,vue-resource安装
    
    
    
    cnpm install vue-resource --save
    
    
    
    在main.js中加入
    
    import VueResource from 'vue-resource'
    
    Vue.use(VueResource)
    
    
    
    8,vuex
    
    cnpm install vuex --save
    
    在main.js中加入
    
    import Vuex from 'vuex'
    
    import store from './vuex/store'
    
    Vue.use(Vuex)
    
    VUE实例中加入store,
    
    
    
    
    
    清除缓存cnpm cache clean --force
    
    
    
    9,vue-axios
    
    cnpm install --save axios vue-axios
    
    main.js中写
    
    import Vue from 'vue'
    
    import axios from 'axios'
    
    import VueAxios from 'vue-axios'
    
    
    
    Vue.use(VueAxios, axios)