The last time I used scaffolding to build a project from scratch was two years ago. It just happened that a new project was launched recently. I decided to rebuild one and sort out the process.
Steps:
1. Install node: You need to download a stable version from the official website of node and install it.
2. Install scaffolding:
//这里是脚手架3
npm install -g @vue/cli
3. Create a project:
vue create 项目名
Then the following options appear, now I choose vue2 and vue3; here I choose vue2, the main consideration is that vue2 is relatively mature, which is convenient for other colleagues to participate and maintain.
After the installation is complete, the dependent packages will be automatically installed, and you only need to run the project.
npm run serve
After the project is installed, the directory structure is as shown in the figure below:
4. Modify the favicon.ico icon in the public folder and replace it with your own icon.
5. Install and configure router
npm i vue-router
Create a new router folder under the src folder and configure the routing file.
import Router from 'vue-router';
import Vue from 'vue';
Vue.use(Router);
let routes = [
{
path:'/',
redirect: '/login'
},{
path:'/login',
name:'login',
component: () => import('@/view/login/index'),
meta:{
title:'登陆'
}
}
]
const router = new Router({
mode:'hash',
routes
})
export default router;
After configuration, import it into mai.js and mount it to the instance.
import router from './router';
new Vue({
router,
render: h => h(App),
}).$mount('#app')
6. Modify App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
7. Configure packaging instructions for different environments.
This step is because we are now completely separated from the front and back ends of the project. It is very necessary to open packages in different environments according to the instructions when packaging and going online.
You can refer to the configuration of vue packaging instructions in different environments (vue-cli2, vue-cli3)
After configuration, create a new config.js file in the same level directory of src to configure the service addresses of different environments, and then expose them
let baseUrl = '';
switch (process.env.VUE_APP_TITLE) {
case 'test': //测试
baseUrl = 'xxxxxx';
break
default: //默认 - 本地开发
baseUrl = 'xxxxxx'; // 必须是 http 或者 https 开头
}
export default baseUrl;
8. Install axios
npm i axios
Create an axios folder under the src folder
import axios from 'axios';
const service = axios.create({
withCredentials: false,//表示跨域请求时是否需要使用凭证
timeout: 8000 //指定请求超时的毫秒数
})
//请求拦截器
service.interceptors.request.use(request => {
return request
},(error) =>{
return Promise.reject(error);
})
//响应拦截器
service.interceptors.response.use(response => {
return response;
},(error) =>{
return Promise.reject(error);
})
export default service;
Create a new http.js file under the axios folder to encapsulate the interface request method.
import service from './index';
import baseUrl from '../../config'
function http( method, url, params ){
method = method.toLocaleLowerCase()
/**
* post 新增
* put 修改
* get 查询
* delete 删除
* */
if(method == 'post') {
return service.post(url, params)
} else if (method == 'put'){
return service.put(url, params)
} else if (method == 'get'){
return service.get(url, {
params:params})
} else if (method == 'delete'){
return service.delete(url, {
params:params})
}
}
export {
http, baseUrl };
Then it can be directly introduced and used in the interface api.
import {
http, baseUrl } from '@/axios/http';
const loginApi = {
login(data){
return http('post', `${
baseUrl}/xxxx`, data);
}
}
export default loginApi;
9. Create the vue.config.js file at the same level as the src. I have turned off the strict mode here.
module.exports = {
lintOnSave: false,
productionSourceMap: false,
publicPath: './'
}
10. Vuex configuration
project is not recommended to use eventBus, the later maintenance is too troublesome. Vuex is used here
npm i vuex --save
Create a store folder under the src folder to configure related attributes.
Here I use a plug-in to solve the problem of data loss in vuex when refreshing the page, refer to the problem of data loss in vuex when refreshing the page.
The configuration is introduced in main.js and mounted to the instance
import store from './store';
new Vue({
store,
render: h => h(App),
}).$mount('#app')
11. Introduce the initialization style plug-in
npm install --save normalize.css
main.js introduced
import 'normalize.css/normalize.css';
12. The component library introduces element
npm i element-ui -S
Then import it globally in main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '@/assets/css/element-variables.scss'
Vue.use(ElementUI);
13, install sass
npm install sass-loader@10.x --save-dev
npm install node-sass@4.x --save-dev
The installation here will specify the version because the higher version of node-sass cannot be installed, and the higher version of sass-loader will report an error.
14. Unified management
of filters, components, and instructions Create the filters, components, and directives folders under the src folder. Common filters, components, and instructions are all centrally defined in the corresponding files.
In this way, basically a project is successfully built, and the rest is the structural design of the pages in the project.