# vue-default

**Repository Path**: gs-code/vue-cli3

## Basic Information

- **Project Name**: vue-default
- **Description**: vue基础功能实现收录
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-06-06
- **Last Updated**: 2023-10-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

git 提交规范
1.  feat：新功能（feature）
2.  fix：修补 bug
3.  docs：文档（documentation）
4.  style： 格式（不影响代码运行的变动）
5.  refactor：重构（即不是新增功能，也不是修改 bug 的代码变动）
6.  test：增加测试
7.  chore：构建过程或辅助工具的变动

## vue-cli3

```
// 安装 vue-cli3
npm install -g @vue/cli


// 创建项目 (两个选项)
vue create cli3

Please pick a preset:(User arrow keys)
> default (babel,eslint)   // 基础模板 组件需要单独安装
  manually select features // 手动选择功能
  // 选择手动选择功能 如下 (点击空格选中功能)
  
? Please pick a preset: Manually select features
? Check the features needed for your project:
o Babel  (必选)
o TypeScript
o Progressive Web App (PWA) Support
o Router  (路由)
o Vuex
o CSS Pre-processors (less sass)
o Linter / Formatter (eslint)
o Unit Testing 
o E2E Testing

// 安装组件
vue add router

// 安装依赖
npm install

// 运行项目
npm run serve    ||  npm install --registry=https://registry.npm.taobao.org


// 打包项目
npm run build


```

## 使用淘宝镜像

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

cnpm install
```

## 安装vue-cli 2.x

```
npm install -g @vue/cli-init
// vue init 的运行效果将会跟 vue-cli@2.x
vue init webpack my-project
```
serve -s dist
##  配置  在根目录下 新建vue.config.js 配置信息

```
module.exports = {
  // 禁用eslint
  lintOnSave: false,
  // 设置axios跨域请求(开发环境使用)
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.douban.com/v2',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  <!-- 页面使用示例 -->
   axios.get('/api/ajax/statuses/mymblog?uid=7696239572&page=1&feature=0').then(res=>{
     console.log(11111,res);
  })
  // 设置服务器部署路径
  publicPath: process.env.NODE_ENV === 'production'
    ? '/m/sf/h5/'
    : '/'
}
```

## vuex 
 - vuex 的5个属性:

```
// 1. state: state定义了应用状态的数据结构 同样可以在这里设置默认的初始状态

state:{
    projects:[],
    userProfile:{}
}

// 2. actions: Actions 即定义提交触发更改信息的描述, 常见的例子有从服务端获取数据,在数据获取完成后调用store.commit()来调用更改Store中的状态. 可以在组件在红使用dispatch来发出Actions.

actions: {
    LOAD_PROJECT_LIST: function ({ commit }) {
      axios.get('/secured/projects').then((response) => {
        commit('SET_PROJECT_LIST', { list: response.data })
      }, (err) => {
        console.log(err)
      })
    }
  }

// mutations: 调用mutations是唯一允许更新应用状态的地方  

mutations:{
       SET_PROJECT_LIST: (state, { list }) => {
      state.projects = list
    }
}

// getter:getter允许组件从store中获取数据 比如我们从store中的projectList中筛选中已完成的项目列表
  
```

##  Axios 跨域 

```
 1. main.js 

axios.defaults.baseURL = '/api'
axios.defaults.headers.post['Content-Type'] = 'application/json';
Vue.prototype.axios = axios

2.修改config文件夹下的index.js文件，在proxyTable中添加
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.douban.com/v2',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }

  3. 使用
      getData() {
      this.axios
        // new_movies
        //subject/26825664/photos
        .get("/movie/new_movies", {
          params: {
            count: 10,
            apikey: "0df993c66c0c636e29ecbb5344252a4a"
          }
        })
        .then(res => {
          console.log(res.data);
          this.listArr = res.data.subjects;
          this.title = res.data.title;
        })
        .catch(error => {
          console.log(error);
        });
    }
```