摘要: 从零开始搭建vue.js项目(一)
搭建项目
初始化项目
1
2
3
4
5
6
7
| $ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack paascloud-paas-web
# 安装依赖，走你
$ cd paascloud-paas-web
$ npm install
$ npm run dev
|
添加各种需要依赖的组件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| λ 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| $ 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
|
安装项目所需依赖
1
2
3
| $ 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
1
2
3
4
5
6
7
8
| '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')
|
启动项目
1
2
| $ npm run dev
访问 http://localhost:8080/ 看见久违的Hello World 项目第一步 搭建成功
|
集成所需插件
完整引入
1
2
3
4
5
6
7
8
9
10
11
| 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：
1
| $ npm install babel-plugin-component -D
|
然后，将 .babelrc 修改为
1
2
3
4
5
6
| "plugins": [["component", [
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]], "transform-runtime"],
|
接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| 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 中写入以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
| import routes from './router';
import VueRouter from 'vue-router';
Vue.use(VueRouter);
# 传统的url方式
const router = new VueRouter({
mode: 'history',
root: '/',
routes
});
router.beforeEach((to, 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
1
2
3
4
5
6
7
8
| import Hello from '@/components/Hello';
export default [
{
path: '/',
name: 'Hello',
component: Hello
}
];
|
引入 axios
需要在 main.js 中写入以下内容：
引入 NProgress
需要在 main.js 中写入以下内容：
1
2
3
| import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
Vue.prototype.$pcNProgress = NProgress;
|
引入 axios
需要在 main.js 中写入以下内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| 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 中写入以下内容：
1
2
3
4
5
6
7
8
9
10
| 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 中写入以下内容：
1
2
3
4
5
| import VueLazyload from 'vue-lazyload';
Vue.use(VueLazyload, {
loading: 'static/loading-svg/loading-bars.svg',
try: 3 // default 1
});
|
需要在 main.js 中写入以下内容：
1
| import 'font-awesome/css/font-awesome.css';
|
引入 font-awesome
需要在 main.js 中写入以下内容：
1
2
3
| import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
Vue.prototype.$pcNProgress = NProgress;
|
引入 vue-awesome-swiper
需要在 main.js 中写入以下内容：
1
2
| import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper);
|
引入 mixins
需要在 src mkdir mixins main.js 中写入以下内容：
1
2
| import Mixin from './mixins';
Vue.mixin(Mixin);
|
引入 vueBus
需要在 mkdir src/vueBus.js
1
2
| import Vue from 'vue';
export default new Vue();
|
然后在main.js 中写入以下内容：
1
2
| import Bus from 'src/vueBus';
Vue.prototype.$pcBus = Bus;
|
引入 全局过滤器 filters
需要在 mkdir src/filters main.js 中写入以下内容：
1
2
| import filters from './filters';
Object.keys(filters).forEach(k => Vue.filter(k, filters[k]));
|
引入 NProgress
需要在 main.js 中写入以下内容：
1
2
3
| import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
Vue.prototype.$pcNProgress = NProgress;
|
