vs code 新建前端项流程笔记

1 安装好vs code和nodejs（检查nodejs版本）

2 全局安装vue-cli，vue-cli可以帮助我们快速构建Vue项目

vuecli3：

① 安装命令： npm install -g @vue/cli
② 创建vue项目：vue create myvue 或基于ui界面创建Vue项目，命令：vue ui

vuecli3官网：https://cli.vuejs.org/zh/guide/installation.html

vuecli2：

① npm install -g vue-cli 卸载：npm uninstall -g vue-cli
② 安装webpack，它是打包js的工具：npm install -g webpack
③ vue init webpack myvue
接着会出现一些配置项，可以根据需要配置，也可以默认，直接按回车

图片.png

3 安装依赖性注意：要在项目文件的目录下

安装命令：npm install

4 启动服务，这个必须是在myvue的目录下，如果不在 cd 文件夹目录

cli2: npm run dev 或 npm run start

cli3: npm run serve

5 成功之后，接着在浏览器里输入:http://localhost:8080，看到如下画面就是成功了

图片.png

6 如果研发手机端我用的是vant 安装vant

（官网：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart）
安装命令：npm i vant -S

element官网：https://element-plus.gitee.io/zh-CN/guide/design.html
备注：
Element-ui适用于vue2
Element-plus适用于vue3

7 在main.js中引用vant

图片.png

8 报错：

图片.png

解决办法：这是因为开启了eslint 编码规范检查，找到webpack.base.conf.js文件：找到这行代码注释掉就可以了

图片.png

9 app.vue是主界面

原始配置：

图片.png

如果要替换首界面文件则：

图片.png

10 插入轮播图片

图片.png

但是页面不现实，打开F12 发现报错vant Failed to resolve directive: lazy

解决方法：这是因为Vant自定义指令找不到
import Vant,{Lazyload} from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
Vue.use(Lazyload);

11 调式

图片.png

12 运行服务 cli2: npm run dev cli3: npm run serve

如果报错

图片.png

配置dev 或者 serve

图片.png

13 打包 npm run build

打包完成后包生成在根目录下 dist文件夹

vuecli3:

图片.png

如果想要修改dist或则static文件名称，需要新建vue.config.js，文章下面会详细介绍

vuecli2:

图片.png

如果想要修改dist或则static文件名称，需要打开config / index.js

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),//生成html文件路径

    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'), // 对应的就是dist的文件夹名称
    assetsSubDirectory: 'static',   // 对应的就是dist下的static文件夹
    assetsPublicPath: './',

14 npm run build打包项目之后，生成的dist文件里面有被压缩后的static文件跟index.html，直接打开index.html页面是空白的

vuecli3:

图片.png

内容为：

module.exports = {
  // 基本路径
  publicPath: './',
  // 输出文件目录
  outputDir: 'dist',
  configureWebpack: {
    externals: {
    }
  }
}

图片.png

vuecli2:

图片.png

这样打开index.html就是首界面啦！！！

15 下面该配置axios 读取后台接口了

① 安装语句：npm install axios -S

② 新建一个src/plugins/axios.js文件：用于配置请求拦截器、跨域等问题

③ 报错：Expected indentation of 2 spaces but found 8

图片.png

解决办法：添加一下校验规则

图片.png

④ 在新建的js文件中实例化axios
较科学的封装好的axios：（axios.js）

import axios from 'axios'
import { Notify } from 'vant';


// 创建 axios 实例
const requests = axios.create({
    //baseURL: process.env.VUE_APP_API, // 基础url,如果是多环境配置这样写，也可以像下面一行的写死,在.env.production中配置
    baseURL: 'http://www.neimXXXX.com/realEstateOnline',
    timeout: 6000 // 请求超时时间
})



// 错误处理函数
const err = (error) => {
    if (error.response) {
        const data = error.response.data
        // const token = Vue.ls.get(ACCESS_TOKEN)
        if (error.response.status === 403) {
            Notify({ type: 'danger', message: data.message || data.msg });
        }
        if (error.response.status === 401) {
            Notify({ type: 'danger', message: '你没有权限。' });
            // if (token) {
            //   store.dispatch('Logout').then(() => {
            //     setTimeout(() => {
            //       window.location.reload()
            //     }, 1500)
            //   })
            // }
        }
    }
    return Promise.reject(error)
}



// request interceptor(请求拦截器)
//requests.interceptors.request.use(config => {
////   const token = Vue.ls.get(ACCESS_TOKEN)
//const token = localStorage.getItem('token')
//if (token) {
//config.headers['token'] = token // 让每个请求携带自定义 token 请根据实际情况自行修改
//}
//return config
//}, err)

requests.interceptors.request.use(
    (config) => {
        console.log(config)
        // config.data = JSON.stringify(config.data);
        if (config.url == "/licenseService/connect/token") {
            config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        } else if (config.url == "/Files") {
            config.headers['Content-Type'] = 'multipart/form-data';
        } else {
            config.headers['Content-Type'] = 'application/json;charset=UTF-8';
        }
        let token = localStorage.Authorization;
        if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
            config.headers['Authorization'] = token;
        }
        return config
    },
    (error) => {
        return Promise.reject(error);
    }
);



// response interceptor（接收拦截器）
requests.interceptors.response.use((response) => {
    const res = response.data
    if (res.code !== 0 && res.code !== 200) {
        Notify({ type: 'danger', message: res.message || res.msg });
        // 401:未登录;
        if (res.code === 401 || res.code === 403 || res.code === 999) {
            Notify({ type: 'danger', message: '请登录' });
        }
        return Promise.reject('error')
    } else {
        return res
    }
}, err)


//一定要有
export default {
    requests
}

备注：如果使用配置文件，则：

图片.png

⑤ main.js 引入，添加到vue原型

图片.png

⑥ 使用axios

 mounted () {
    this.axios.get("/PublishContent/Content", {
      params: {
        type: '机构简介', //类型  string
        title: '机构简介', //标题   string
      }
    }).then(res => {
      this.message = res.data.content;
    })
      .catch(() => {
        this.$toast.fail('系统错误')
      });
  }
}

⑦ 报错：

图片.png

解决办法： this.axios 确实没有get函数，get函数在 this.axios.requests之下，所以将第三步的请求换成

图片.png

这个丢了也会报错

图片.png

⑧ 访问axios 终于成功了虽然是200 但是一直进catch
找了半天终于找到原因，是因为封装axios中的接收拦截器设置不对
二次封装了axios，会判断返回的 res数据是否包含 res.code !== 0 && res.code !== 200 根据后端接口实际情况进行修改即可，我是直接注释掉，就不报错了
到此，终于访问到值了！！！！！

axios配置参考网址：https://www.cnblogs.com/nogodie/p/9853660.html

16 跨域问题

① 首先在根目录下新建vue.config.js

module.exports = {
    filenameHashing: true,
    pages: {
        index: {
            entry: 'src/main.js',
            template: 'public/index.html',
            filename: 'index.html',
            chunks: ['chunk-vendors', 'chunk-common', 'index'],
        },
    },

    configureWebpack: {
        output: {
            filename: `[name].${new Date().getTime()}.js`,
            chunkFilename: `[name].${new Date().getTime()}.js`
        },
    },
    lintOnSave: false,

    productionSourceMap: false,
    //输出路径
    publicPath: './',
    //输出文件名称
    outputDir: 'dist',
    devServer: {
        host: 'localhost',
        port: 8080, // 端口号
        https: false, // https:{type:Boolean}
        open: true, // 配置自动启动浏览器
        hotOnly: true, // 热更新
        proxy: {
            // 配置多个跨域
            '/api': {
                target: 'http://www.neimegztlaxx.com/XXXXOnline',//跨域接口的地址
                changeOrigin: false,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },

    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'stylus',
            patterns: []
        }
    }
}

② 封装的axios中，将baseURL设置为‘’，但是打包的时候需要换回URL，部署时一般用到nginx代理进行跨域

图片.png

③ 使用axios时前面需要加 /api

图片.png

④ 这样就完成了跨域，但是我调式的时候发现访问地址还是我本机的地址根本不是我代理的地址，我就以为没有代理过去，这个问题折腾了我一天！！！
后来我发现虽然代理成功，但是地址还是会显示本机IP
其实已经成功了

图片.png

17 配置路由

vuecli2中自带Vue-router，vueli3中需要自己配置之前写过一篇文章《vue-cli + vant 路由的设置》专门介绍如何配置

备注：Vue-router 中有hash模式和history模式，vue的路由默认是hash模式，一般开发的单页应用的URL都会带有#号的hash模式

图片.png

注意：首界面设置此处就是路由转换的地方

图片.png

18 页面刷新 reload

图片.png

在所想添加reload的vue里直接如下：

图片.png

19 接下来就剩最后一步进行登录和token验证！！！

在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：

1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码

2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token

3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面

4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面

5、每次调后端接口，都要在请求头中加token

6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401

7、如果前端拿到状态码为401，就清除token信息并跳转到登录页面

步骤：
① 代码

② axios中添加请求拦截器

requests.interceptors.request.use(
    (config) => {
        console.log(config)
        // config.data = JSON.stringify(config.data);
        // 因为做了跨域，所以 接口前面也要添加 /api 即可
        if (config.url == "/api/licenseService/connect/token") {
            config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
        } else if (config.url == "/Files") {
            config.headers['Content-Type'] = 'multipart/form-data';
        } else {
            config.headers['Content-Type'] = 'application/json;charset=UTF-8';
        }
        let token = localStorage.Authorization;
        if (token) { // 判断是否存在token，如果存在的话，则每个http header都加上token
            config.headers['Authorization'] = token;
        }
        return config
    },
    (error) => {
        return Promise.reject(error);
    }
);

③ 成功

图片.png

备注知识：
① localStorage作为HTML5本地存储web storage特性的API之一，主要作用是将数据保存在客户端中，而客户端一般是指上海网站设计用户的计算机。在移动设备上，由于大部分浏览器都支持web storage特性，因此在android和ios等智能手机上的web浏览器都能正常使用该特性。

localStorage保存的数据，一般情况下是永久保存的，也就是说只要采用localstorage保存信息，数据便一直存储在用户的客户端中。即使用户关闭当前web浏览器后重新启动，数据让然存在。知道用户或程序明确制定删除，数据的生命周期才会结束。

在安全性方面，localstorage是域内安全的，即localstorage是基于域的。任何在该域内的所有页面，都可以访问localstorage数据。但让然存在一个问题，就是各个浏览器厂商的浏览器之间的数据是各自独立的。也就是说，如果在firefox中使用localstorage存储一组数据，在chrome浏览器下是无法读取的。同样，由于localstorage数据是保存在用户的设备中的，因此同一个应用程序在不同设备上保存的数据是不同的。

② vue中sessionStorage的使用
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。
sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

参考文章：https://blog.csdn.net/zzqq12345/article/details/107461098

③ vuex就是一个存放多个组件共用的一个数据的存放、更改、处理的一个容器，就是说来存放处理公共数据的工具，存放的数据一变，各个组件都会更新，也就是说存放的数据是响应式的

笔记中有一篇是 vue中使用vuex 详细介绍了vuex的用法

vs code 新建前端项流程笔记

1 安装好vs code和nodejs（检查nodejs版本）

2 全局安装vue-cli，vue-cli可以帮助我们快速构建Vue项目

vuecli3：

vuecli2：

3 安装依赖性 注意：要在项目文件的目录下

4 启动服务，这个必须是在myvue的目录下，如果不在 cd 文件夹目录

cli2: npm run dev 或 npm run start

cli3: npm run serve

5 成功之后，接着在浏览器里输入:http://localhost:8080，看到如下画面就是成功了

6 如果研发手机端 我用的是vant 安装vant

7 在main.js中引用vant

8 报错：

9 app.vue是主界面

10 插入轮播图片

11 调式

12 运行服务 cli2: npm run dev cli3: npm run serve

13 打包 npm run build

vuecli3:

vuecli2:

14 npm run build打包项目之后，生成的dist文件里面有被压缩后的static文件跟index.html，直接打开index.html页面是空白的

vuecli3:

vuecli2:

15 下面该配置axios 读取后台接口了

16 跨域问题

17 配置路由

18 页面刷新 reload

19 接下来就剩最后一步 进行登录和token验证！！！

你可能感兴趣的:(vs code 新建前端项流程笔记)

3 安装依赖性注意：要在项目文件的目录下

6 如果研发手机端我用的是vant 安装vant

19 接下来就剩最后一步进行登录和token验证！！！