目录结构: (1):build:---------------------------------------------------------------------------------:保存webpack初始化配置。 build.js:------------------------------------------------------------------------------: 开发环境构建 check-versions:------------------------------------------------------------------------: 检查版本 dev-server.js:------------------------------------------------------------------------: 构建本地服务器(npm run dev 运行) dev-client.js:------------------------------------------------------------------------:开发热重载(用于实现页面的自动刷新),此项目没有加。 utils.js:------------------------------------------------------------------------------: 构建相关工具 vue-loader.conf.js:--------------------------------------------------------------------: css加载配置 webpack.base.conf.js:------------------------------------------------------------------:webpack基础配置 webpack.dev.conf.js:-------------------------------------------------------------------:webpack开发环境配置 webpack.prod.conf.js:------------------------------------------------------------------:webpack生产环境配置 (2):config:--------------------------------------------------------------------------------:保存一些项目初始化配置。 dev.env.js-----------------------------------------------------------------------------:开发环境配置 index.js-------------------------------------------------------------------------------: 项目主要配置(包括监听端口,打包路径等) jquery.min.js--------------------------------------------------------------------------: jqery prod.env.js----------------------------------------------------------------------------: 项目生产环境配置 (3):node_modules:--------------------------------------------------------------------------:npm加载的项目依赖模块。 node_modules里面是项目的依赖包,其中包括很多基础依赖,自己也可以根据需要安装其他依赖。 cmd---------------->cd 进入项目--------------->npm install 包名@版本[回车] (4):src:-----------------------------------------------------------------------------------:开发目录,核心文件。 (5):static:--------------------------------------------------------------------------------:静态资源目录(一般是图片类资源) (6):.babelrc-------------------------------------------------------------------------------:babel编译参数 (7):.eslintignore--------------------------------------------------------------------------:js(未知) (8):.eslintrc.js---------------------------------------------------------------------------:js(未知) (9).gitignore------------------------------------------------------------------------------:git上传需要忽略的文件配置 (10).postcssrc.js--------------------------------------------------------------------------:转换css的工具 (11)favicon.ico----------------------------------------------------------------------------:图标 (12)index.html-----------------------------------------------------------------------------:首页入口文件 (13):package.json--------------------------------------------------------------------------:项目配置文件 (14):README.md-----------------------------------------------------------------------------:项目说明 (15):README-en.md--------------------------------------------------------------------------:注意事项 src项目开发目录,核心文件: (1):index.html:------------------------------------------------------------------------: 和html一样,但一般只定义一个空的根节点, 在main.js里面定义的实例将挂载在根节点下, 内容都通过vue组件来填充 (2):App.vue:----------------------------------------------------------------------------: 根组件,vue页面通常由:模板(template),js(script),样式(style)组成。 template:-----------------:其中模板只能包含一个父节点,也就是说顶层的div只能有一个(例如下图,父节点为#app的div,其没有兄弟节点) -----------------:<router-view></router-view>是子路由视图,后面的路由页面都显示在此处 -----------------:打一个比喻吧,<router-view>类似于一个插槽,跳转某个路由时,该路由下的页面就插在这个插槽中渲染显示 script:-------------------:vue通常用es6来写,用export default导出,其下面可以包含数据data,生命周期(mounted等),方法(methods)等, style:--------------------:样式通过style标签<style></style>包裹,默认是影响全局的, 如需定义作用域只在该组件下起作用,需在标签上加scoped,<style scoped></style> 如要引入外部css文件,首先需给项目安装css-loader依赖包,打开cmd,进入项目目录,输入npm install css-loader,回车。 安装完成后,就可以在style标签下import所需的css文件,例如: <style> import './assets/css/public.css' </style> 这样,我们就可以把style下的样式封装起来,写到css文件夹,再引入到页面使用,整个vue页面也看上去更简洁。 (3):main.js:----------------------------------------------------------------------------: 入口文件main.js主要是引入vue框架,根组件及路由设置, 并且定义vue实例,后期还可以引入插件,当然首先得安装插件。 (4):router:-----------------------------------------------------------------------------: 路由配置 router文件夹下,有一个index.js,即为路由配置文件这里定义了路径为'/'的路由,该路由对应的页面是Hello组件, 所以当我们在浏览器url访问http://localhost:8080/#/时就渲染的Hello组件类似的,我们可以设置多个路由,‘/index’,'/list'之类的, 当然首先得引入该组件,再为该组件设置路由。