vue项目搭建

安装淘宝镜像

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

安装webpack

cnpm install webpack -g

安装vue脚手架

npm install vue -cli -g 或 cnpm install --global vue-cli

进入项目目录 cd

 

创建项目 vue create hello-world

 

配置

1、下载依赖模块：npm install

2、安装饿了么、npm i element-ui -S

1）在main.js里

import Vue from 'vue';

import Element from 'element-ui';

import '../element-variables.scss';

Vue.use(Element);

3）配置file_loade(在webpack.config.js)

查看package.json里是否有file_loade模块

1.安装file_loade ：npm install file_loade --save

2.在webpack.config.js

{
            test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
            loader: 'file-loader'

 }
 

2）

Element 的 theme-chalk 使用 SCSS 编写，如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element 的样式变量。新建一个样式文件，例如 element-variables.scss，写入以下内容：

/* 改变主题色变量 */
$--color-primary: teal;

/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-ui/lib/theme-chalk/fonts';

@import "~element-ui/packages/theme-chalk/src/index";

之后，在项目的入口文件中，直接引入以上样式文件即可（无需引入 Element 编译好的 CSS 文件）：

import Vue from 'vue'
import Element from 'element-ui'
import './element-variables.scss'

Vue.use(Element)

3、配置router

1）在router/index.js里

import Vue from 'vue';

import Router from 'vue-router';

Vue.use(Router);

const routesList = [{

path: '/',

name: 'home',

component: () => import('../views/Home.vue'),

}];

export default new Router({

routes: routesList,

});

2）在main.js里

import Vue from 'vue';

import App from './App.vue';

import router from './router';

import store from './store';

 

Vue.config.productionTip = false;

 

new Vue({

router,

store,

render: h => h(App),

}).$mount('#app');

3）在App.vue里

<router-view></router-view>

 

4、安装 axios

1）yarn add axios 或 npm install axios

2）在api/fetch.js里引入

import axios from 'axios';

3）在package.json里查看

"dependencies": {

"axios": "^0.18.0",

}

 

5、api里的fetch.js配置服务器接口

/**

* Created by niuzz on 17/10/1.

*/

import axios from 'axios';

import { Message } from 'element-ui';

import qs from 'qs';

// import { CryptoJSAesEncrypt, CryptoJSAesDecrypt } from '@/util';

 

// const KEY = 'c098884257f33f6c3cba6680ab939117';

 

const service = axios.create({

baseURL: '/index.php/api/', // baseUrl

timeout: 60000, // 超时时间

headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

transformRequest: [function qsTransform(data) {

return qs.stringify(data);

}],

// transformRequest: [function (data) {

// let str = JSON.stringify(data)

// let encrypted = CryptoJSAesEncrypt(KEY, str)

// return qs.stringify({ 'encrypt_params': encrypted })

// }]

});

 

// 响应拦截

service.interceptors.response.use((response) => {

if (response.data.code === 6001) {

Message({

message: '用户失效，请重新登录',

type: 'error',

});

setTimeout(() => {

window.location.href = '/';

}, 1000);

}

return response;

}, (error) => {

Message({

message: '网络连接错误',

type: 'error',

duration: 5 * 1000,

});

// 处理响应失败

return Promise.reject(error);

});

 

export default service;

 

6、vue.config.js配置