Vue全家桶

Vue-router

需要在to前面加：

1.每个模块只能使用一次 export default {}
2.如果没有导出任何东西，导入则是空对象
按需导出 导入可以同时存在

webpack

module.exports = {
    //编译模式   
    mode: 'development' //development     production
}

"dev": "webpack"

引入打包后的文件，可以解决一些兼容问题

const path = require('path') //导入node中专门操作路径的模块

module.exports = {
    //编译模式   
    mode: 'development', //development     production
    entry: path.join(__dirname, './src/index.js'), //打包入口文件的路径   __dirname  代表当前文件的根目录
    output: {
        path: path.join(__dirname, './dist'), //输出文件的存放路径
        filename: 'bundle.js' //输出文件的名称
    }

}

等待中，，实现自动打包,只要内容改变，就可实现打包

const path = require('path') //导入node中专门操作路径的模块
const HtmlWebpackPlugin=require('html-webpack-plugin')  //导入生成预览页面的插件，得到一个构造函数

//创建插件实例对象
const htmlPlugin=new HtmlWebpackPlugin({
    template:'./src/a.html',          //指定要用到的模板
    filename:'index.html'           //指定生成文件的名称，该文件存在于内存中，在目录中不显示
})

module.exports = {
    //编译模式   
    mode: 'development', //development     production
    entry: path.join(__dirname, './src/index.js'), //打包入口文件的路径   __dirname  代表当前文件的根目录
    output: {
        path: path.join(__dirname, './dist'), //输出文件的存放路径
        filename: 'bundle.js' //输出文件的名称
    },
    plugins:[htmlPlugin]     //plugins数组是webpack打包期间会用到的一些插件

}

配置了–open ,可以实现打包之后，打开浏览器

"dev": "webpack-dev-server --open"

–host 配置IP地址
–port配置端口号

"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8888"

const path = require('path') //导入node中专门操作路径的模块
const HtmlWebpackPlugin = require('html-webpack-plugin') //导入生成预览页面的插件，得到一个构造函数

//创建插件实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    template: './src/a.html', //指定要用到的模板
    filename: 'index.html' //指定生成文件的名称，该文件存在于内存中，在目录中不显示
})

module.exports = {
    //编译模式   
    mode: 'development', //development     production
    entry: path.join(__dirname, './src/index.js'), //打包入口文件的路径   __dirname  代表当前文件的根目录
    output: {
        path: path.join(__dirname, './dist'), //输出文件的存放路径
        filename: 'bundle.js' //输出文件的名称
    },
    plugins: [htmlPlugin], //plugins数组是webpack打包期间会用到的一些插件
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
        ]
    }

}

const path = require('path') //导入node中专门操作路径的模块
const HtmlWebpackPlugin = require('html-webpack-plugin') //导入生成预览页面的插件，得到一个构造函数

//创建插件实例对象
const htmlPlugin = new HtmlWebpackPlugin({
    template: './src/a.html', //指定要用到的模板
    filename: 'index.html' //指定生成文件的名称，该文件存在于内存中，在目录中不显示
})

module.exports = {
    //编译模式   
    mode: 'development', //development     production
    entry: path.join(__dirname, './src/index.js'), //打包入口文件的路径   __dirname  代表当前文件的根目录
    output: {
        path: path.join(__dirname, './dist'), //输出文件的存放路径
        filename: 'bundle.js' //输出文件的名称
    },
    plugins: [htmlPlugin], //plugins数组是webpack打包期间会用到的一些插件
    module: {
        rules: [
            //打包css文件 \.是转义.
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            //打包less文件
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            //打包sass文件  这里注意sass文件后缀名为scss
            // { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            //自动转换css样式，解决兼容问题  自动添加兼容前缀
            // { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
            //配置打包图片的
            { test: /\.jpg|png|gif|bmp|eot|svg|woff|woff2$/, use: 'url-loader?limit=16940' }
        ]
    }

}

不写exclude会报错

打包高级js所要用到的包

第一步
npm i babel-loader @babel/core @babel/runtime -D 
第二步
npm i 
@babel/preset-env 
@babel/plugin-transform-runtime
 @babel/plugin-proposal-class-properties -D

Vue cli

npm i -g @vue/cli

解决eslint node报错问题

'requireConfigFile': false,

module.exports = {
    root: true,
    env: {
        node: true,
        es6: true,
        browser: true,
    },
    extends: [
        'plugin:vue/vue3-essential',
        '@vue/standard'
    ],
    parserOptions: {
        parser: '@babel/eslint-parser'
    },
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
        'requireConfigFile': false,
    }
}

存在跨域用token,不存在跨域用前两个

import Vue from 'vue'
import VueRouter from 'vue-router'
//导入组件
import Login from '../views/login.vue'
import Index from '../views/index'
Vue.use(VueRouter)
const routes = [
    //重定向
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login },
    { path: '/index', component:Index },
]
const router = new VueRouter({
    routes
})
//挂载路由导航守卫
router.beforeEach((to,from,next)=>{
    //to 将要访问的路径
    //from 代表从哪个路径跳转而来
    //next 是一个函数 表示放行
    //next() 放行  next('/login') 强制跳转
    //如果访问的是登录页，放行
    if(to.path==='/login') return next()
    //获取token
    const tokenStr =window.sessionStorage.getItem("token");
    if(!tokenStr) return next("/login")
    //不能少最后一个next(),否则不能放行
    next();
})
export default router