vue学习经验总结（搭建cli脚手架 --web项目）

偏执的太偏执、 2022-11-28 10:54 184阅读 0赞

1.全局安装vue 脚手架

npm install -g @vue/cli

2.检查 `vue -V` 是否安装好  
3.新建项目

vue create myproject(项目名）

4.选择`Manually select features` 回车  
使用空格确定和取消  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70_pic_center]

*TypeScript 支持使用 TypeScript 书写源码  
Progressive Web App (PWA) Support PWA 支持。  
Router 支持 vue-router 。  
Vuex 支持 vuex 。  
CSS Pre-processors 支持 CSS 预处理器。  
Linter / Formatter 支持代码风格检查和格式化。  
Unit Testing 支持单元测试。  
E2E Testing 支持 E2E 测试。*

5.选择不保留设置

Use history mode for router? (Requires proper server setup for index fallback in production)     No

6.选择语法严格模式  
![在这里插入图片描述][20200908083537401.png_pic_center]

7.选择语法检查方式，选择保存就检测  
第一个是保存检测，第二个是fix和commit的时候检测  
选择 `Lint on save`  
8.选择配置文件  
![在这里插入图片描述][20200908083559399.png_pic_center]

9.是否保存设置  
![在这里插入图片描述][20200908083621741.png_pic_center]

10.一路回车走到底等待安装完成 `use Npm`  
11.完成安装后

cd  myproject  进入目录
    npm  run serve  启动项目
    npm build serve  编译发布项目

12.安装axios

npm install axios --save  
引入 ： import axios from axios

13.安装css预处理器（stylus)

npm install stylus -D

npm install stylus-loader css-loader style-loader --save-dev

14.全局安装ant design -vue

npm install ant-design-vue --save

15.创建一个layout文件，相当于主文件，路由各种切换操作放在这里，头尾公用的组件也放这里  
html部分：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70_pic_center 1]

事件部分：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70_pic_center 2]  
change事件里面是主页面，详情部分不需要加  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70_pic_center 3]

16.在跟目录下引入units  
17.修改app.vue,main.js,router.js里面的内容  
app.vue:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70_pic_center 4]

main.js:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70_pic_center 5]

router.js  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70_pic_center 6]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70_pic_center 7]

18.在src目录下新建request接口文件夹，写入api.js和http.js  
api.js:  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70_pic_center 8]

http.js:

import axios from 'axios'
    import Message from 'ant-design-vue/lib/message';
    import 'ant-design-vue/lib/message/style/css';
    import '../../public/config'    //打包的时候，记得注释
    
    const apiUrl = window.g.apiUrl
    // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
      let token = localStorage.getItem('token')
      config.timeout = 10000
      config.headers.common['Authorization'] = token ? token : '';
      return config;
    }, function (error) {
      return Promise.reject(error);
    });
    // 响应拦截器
    axios.interceptors.response.use(
      response => {
        // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
        // 否则的话抛出错误
        if (response.status === 200) {
          return Promise.resolve(response);
        } else {
          return Promise.reject(response);
        }
      },
      error => {
        if (error.response.status) {
          switch (error.response.status) {
            // 404请求不存在
            case 404:
              Message.error('请求不存在')
              break;
          }
          return Promise.reject(error.response);
        }
      }
    )
    
    export function get(url, params) {
      return new Promise((resolve, reject) => {
        axios.get(apiUrl + url, {
          params: params
        }).then(res => {
          resolve(res.data);
        }).catch(err => {
          reject(err.data)
        })
      });
    }
    export function post(url, params) {
      return new Promise((resolve, reject) => {
        axios.post(apiUrl + url, params)
          .then(res => {
            resolve(res.data);
          })
          .catch(err => {
            reject(err.data)
          })
      });
    }

19.vueX的使用方法：

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        username: '',
        isLogin: 1,        //0已登录    1未登录
        role: '',
        icon: '',
        authentation: '',
        chapterId:'',
        taskId:'',
        isJoined:false
        // token:localStorage.getItem('token') ? localStorage.getItem('token') : ''
      },
      mutations: {
        toggleIsLogin(state, payload) {
          state.isLogin = payload.isLogin
          state.role = payload.role
          state.username = payload.username
          state.icon = payload.icon
          state.authentation = payload.authentation
        },
        changeIcon(state,payload){
          state.icon=payload.icon
        },
        clear(state){
          state.isLogin = 1
          state.role = ''
          state.username = ''
          state.icon = ''
          state.authentation = ''
        },
        getIds(state,payload){
          state.chapterId=payload.chapterId
          state.taskId=payload.taskId
        },
        changeCourseStatus(state,payload){
          state.isJoined=payload.isJoined
        }
      }
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/ab1f9bec222642f38ef9291e0cd9fd5e.png
[20200908083537401.png_pic_center]: /images/20221124/3e4749cf1f5d46f09f74a1b9445ce328.png
[20200908083559399.png_pic_center]: /images/20221124/3f14645a116347078451a98d3e649965.png
[20200908083621741.png_pic_center]: /images/20221124/e8b10c875bbb44a1925d02964b83d0b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/c25908ab05bc4b2ca67df52ce65d9918.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221124/a54e9f738c814a09b92fd261791197c1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221124/aab57790cb964a5985989bd40edc7e93.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221124/84df1bee684e417babdf17190398534d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221124/7f8a543d467a41da9a749c077b88b741.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221124/01f2f874dd1f49f2a56175d9119fb759.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221124/4abb6d4288084cffa5a2c58a008a6bdc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h1aHVodWph_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221124/523b2b85ed8e4dafad1126715b08eb7f.png