1."static"文件夹可以放静态资源
2."src"文件夹里自动生成的几个文件夹可以删掉,后面我们可以建自己需要的文件夹
3."App.vue"里面可以先删掉多余的东西,只留下最简单的模板
<template> </template> <script> export default { } </script> <style> </style>
4."main.js"里面也可以先全部删掉,只留空白页,后面再一步步加上去
5.在"src"文件夹里面新建几个文件夹,如下
//api:用来放公用或常用的api
//base:基础组件,跟业务逻辑不相关的组件
//common:公用的方法,公用的字体
//components:业务逻辑组件
//router:路由
//store:做vuex的状态管理
6.在"build"文件夹的“webpack.base.conf.js”给上面新建的文件夹,认为常用的文件夹取别名(可以避免../深路径 引用复杂的问题)
在“alias”里面添加
7.把整个网页做成一个大组件<App></App>,放在index.js里面。
在‘main.js’文件引入所需文件以及package.json文件里面添加的包,相当于入口文件引入,则所有的组件都可以使用
import "babel-polyfill" //这个引进来就可以了,不需要用,不用里面的方法 import Vue from "vue" import App from './App' //这里的写法不一样是因为引的是App.vue页面,要用相对路径的写法 import './common/stylus/index.styl' //引入css样式 import fastclick from 'fastclick' new Vue({ el: '#app', //把组件App挂载在index.js页面已经存在的DOM元素#app里面 render: h => h(App) })
其中‘render: h => h(App)’的‘h’是‘createElement’的简写,具体用法百度
8.公共样式,字体,图片等放置:在‘src’->'common'文件里面再新建文件夹如下: