从零开始搭建vue.js项目

搭建项目

初始化项目

$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack paascloud-paas-web
# 安装依赖，走你
$ cd paascloud-paas-web
$ npm install
$ npm run dev

添加各种需要依赖的组件

λ cnpm install -S axios
λ cnpm install -S crypto-js
λ cnpm install -S echarts
λ cnpm install -S element-ui
λ cnpm install -S font-awesome
λ cnpm install -S js-cookie
λ cnpm install -S node-sass
λ cnpm install -S nprogress
λ cnpm install -S qs
λ cnpm install -S sass-loader
λ cnpm install -S store.js
λ cnpm install -S vuex
λ cnpm install -S lockr
λ cnpm install -S vue-awesome-swiper
λ cnpm install -S vue-infinite-scroll
λ cnpm install -S vue-lazyload

设置ESLINT

$  vi .editorconfig
indent_size = 4
$  vi .eslintrc.js
globals: {
"$": true
},
'rules': {
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'semi' : ['error','always'],
'indent': [2, 4, { 'SwitchCase': 1 }],
'space-before-function-paren': 0,
'$': 0 // 0关闭 1警告 2错误
}
注意 这里需要修改src 下的文件以分号结尾
src/App.vue
src/router/index.js
src/components/Hello.vue
src/main.js

安装项目所需依赖

$ cnpm install
没有cnpm的小伙伴建议安装一下cnpm https://npm.taobao.org/ $ npm install -g cnpm --registry=https://registry.npm.taobao.org

建议 先创建 node_modules 这个文件夹 然后添加到excluded选项下 否则webstorm构建项目容易卡死

webpack.base.conf.js

'src': resolve('src'),
'assets': resolve('src/assets'),
'components': resolve('src/components'),
'views': resolve('src/views'),
'store': resolve('src/store'),
'mixins': resolve('src/mixins'),
'util': resolve('src/util'),
'filters': resolve('src/filters')

启动项目

$ npm run dev
访问 http://localhost:8080/ 看见久违的Hello World 项目第一步 搭建成功

集成所需插件

引入 Element

完整引入

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
import App from './App.vue'

Vue.use(ElementUI)

new Vue({
el: '#app',
render: h => h(App)
})

按需引入

首先，安装 babel-plugin-component：

$ npm install babel-plugin-component -D

然后，将 .babelrc 修改为

"plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]], "transform-runtime"],

接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

import {
Input,
Dialog,
Button,
Form,
formItem,
MessageBox,
Message
} from 'element-ui';
const components = [
Input,
Dialog,
Button,
Form,
formItem
];
components.map(component => {
Vue.component(component.name, component);
});
Vue.prototype.$pcMessageBox = MessageBox;
Vue.prototype.$pcMessage = Message;
Vue.prototype.$confirm = MessageBox.confirm;

引入 vue-router

需要在 main.js 中写入以下内容：

import routes from './router';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
# 传统的url方式
const router = new VueRouter({
mode: 'history',
root: '/',
routes
});
router.beforeEach((to,
4000
from, next) => {
if (to.meta.requestAuth) {
if (PcCookie.get(enums.USER.LOGIN_NAME)) {
next();
} else {
next({
path: '/login'
});
}
} else {
// NProgress.start();
next();
}
});
router.afterEach(transition => {
// NProgress.done();
});

然后修改 src/router/index.js

import Hello from '@/components/Hello';
export default [
{
path: '/',
name: 'Hello',
component: Hello
}
];

引入 axios

需要在 main.js 中写入以下内容：

这里写代码片

引入 NProgress

需要在 main.js 中写入以下内容：

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
Vue.prototype.$pcNProgress = NProgress;

引入 axios

需要在 main.js 中写入以下内容：

import axios from 'axios';
Vue.prototype.$http = axios.create({
timeout: 2000
});
Vue.prototype.$http.interceptors.request.use((config) => {
let authToken = PcCookie.get(enums.USER.AUTH_TOKEN);
config.headers.Authorization = authToken;
return config;
}, (error) => {
return Promise.reject(error);
});

Vue.prototype.$http.interceptors.response.use((res) => {
if (res.data.code !== 200) {
window.location.href = '/';
return Promise.reject(res);
}
} else {
if (res.data) {
return res.data;
}
}
}, (error) => {
if (error.response) {
console.error('error: ', error.response);
if (error.response.status === 500) {
alert(error.response.data.message);
} else if (error.response.status === 504) {
alert('网关错误');
} else {
console.log('Error', error.message);
alert('接口请求失败或超时！请刷新重试');
}
} else {
alert('接口请求失败或超时！请刷新重试');
}
return Promise.reject();
});

引入 vuex

需要在 src mkdir store main.js 中写入以下内容：

import Vuex from 'vuex';
import store from './store/';
Vue.use(Vuex);
new Vue({
el: '#app',
router,
store,
template: '<App/>',
components: {App}
});

引入 vue-lazyload

需要在 main.js 中写入以下内容：

import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload, {
loading: 'static/loading-svg/loading-bars.svg',
try: 3 // default 1
});

引入 vue-infinite-scroll

需要在 main.js 中写入以下内容：

import 'font-awesome/css/font-awesome.css';

引入 font-awesome

需要在 main.js 中写入以下内容：

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
Vue.prototype.$pcNProgress = NProgress;

引入 vue-awesome-swiper

需要在 main.js 中写入以下内容：

import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper);

引入 mixins

需要在 src mkdir mixins main.js 中写入以下内容：

import Mixin from './mixins';
Vue.mixin(Mixin);

引入 vueBus

需要在 mkdir src/vueBus.js

import Vue from 'vue';
export default new Vue();

然后在main.js 中写入以下内容：

import Bus from 'src/vueBus';
Vue.prototype.$pcBus = Bus;

引入 全局过滤器 filters

需要在 mkdir src/filters main.js 中写入以下内容：

import filters from './filters';
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));

引入 NProgress

需要在 main.js 中写入以下内容：

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
Vue.prototype.$pcNProgress = NProgress;