我们平时用vue-cli初始化一个基于webpack的项目后，并不是一劳永逸的，需要做一些改动，才适合我们自己开发，下面我一条一条的说
1、首先行缩进的问题
初始化后的App.vue、main.js、router.js等文件的行缩进就恶心死了，我本人是希望缩进四个，它给我缩进两个，所以，得重新临摹一遍
App.vue
<template>
<div id = "app">
<router-view/>
</div>
</template>
<script>
export default{
name:"App",
}
</script>
<style lang = "scss">
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: "Microsoft Yahei", Arial;
text-decoration: none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
body,html{
width:100%;
height: 100%;
word-wrap:break-word;
}
*{
box-sizing: border-box;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
.clearf:after{
content:"";
display: block;
clear: both;
}
.init{
margin:10px;
height: 100%;
background: #fff;
padding:10px;
}
.icon {
width: 1em; height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
#app{
width:100%;
height: 100%;
}
</style>
这里我把css给重置了一下
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import vuescroll from 'vuescroll';
import VueCookie from 'vue-cookie';
Vue.config.productionTip = false;
import ElementUI from 'element-ui';
Vue.use(ElementUI);
Vue.use(vuescroll);
new Vue({
el:"#app",
router,
store,
components:{App},
template: '<App/>'
})我把vuex、router、element-ui什么的都引进来了
router下的index.js
import Vue from 'vue';
import Router from 'vue-router';
import Login from '../pages/login';
Vue.use(Router);
export default new Router({
mode:"history",
routes:[
{
path:"/",
name:"Login",
component: Login
}
]
})新建文件夹
1、新建pages文件夹，放页面，
2、components文件夹用来放组件
3、新建store文件夹，用来放vuex
4、新建server文件夹，用来放常量以及http请求、还有一些工具函数
来个store的模板吧
在store里面新建modules文件夹，在modules下建立模块化功能的js
const state = {
login:{
}
}
const getters = {
}
const mutations = {
}
const actions = {
}
export default{
state,
getters,
mutations,
actions
}index.js这样写
import Vue from 'vue';
import Vuex from 'vuex';
import login from './modules/login';
Vue.use(Vuex);
export default new Vuex.Store({
modules:{
login
}
})做好这些以后，开始开发代码，发现
配置scss
<style lang = "scss" scoped></style> 报错，初始化的项目是不支持scss开发的，所以，需要先下载
npm install sass-loader -Dnpm install node-sass -D下载好了以后去 webpack.base.conf.js 下加一行代码
{
test: /\.scss$/,
use: [
'vue-style-loader',
'css-loader',
'sass-loader'
],
}配置端口
去 config 下面的index.js里配置
host: '0.0.0.0',
port: 8080把host改为0.0.0.0，这样运行npm run dev之后就可以用自己电脑的Ip + 端口号进行访问项目了
配置build
去 config 下面的index.js里配置
// Template for index.html
index: path.resolve(__dirname, '../share/index.html'),//把dist换成自己的名字
// Paths
assetsRoot: path.resolve(__dirname, '../share'),//把dist换成自己的名字
assetsSubDirectory: 'static',
assetsPublicPath: '/',这样就可以执行npm run build生成自己命名的文件夹了
兼容IE
兼容IE的话必须要下载一个插件
npm install babel-polyfill -S同时去 build 文件夹下配置 webpack.base.conf.js配置
entry: {
app: ["babel-polyfill",'./src/main.js']
},就可以了，基本配置在这里了，这篇文章纯粹是给自己做个笔记！！！！！