存放的文件不会经过webpack处理,可以直接引用,例如swf文件如果要引用可以在webpack配置对swf后缀名的文件处理的loader,也可以直接将swf文件放在这个文件夹引用
5.package.json:
这个文件有两部分是有用的:scripts 里面设置命令,例如设置了dev用于调试则我们开发时输入的是
npm run dev ;例如设置了build 则是输入 npm run build 用于打包;另一部分是这里可以看到我们需要的依赖包,在dependencies和devDependencies中,分别对应全局下载和局部下载的依赖包
上一步我们已经生成好项目,现在打开之前说过的package.json 文件,找到devDependencies 和 dependencies ,在这里面可以删掉我们不需要的,其他就则都需要使用 npm install 下载安装,例如vue: npm install vue –save-dev
这个过程会生成一个node_modules 文件夹,这一个过程可能会有一点耗时间,但是也是傻瓜式,一个个下载,下载好之后输入npm run dev 。如果有哪些缺漏的都会提示再补下载就好了
当所有依赖包都下载好之后,输入命令:npm run dev 运行就可以看到一个自带的默认页面打开。此时项目就已经全部搭建好并且运行了~炒鸡简单吧,总结下来其实只有四步
npm install --global vue-cli 下载vue-cli脚手架
vue init webpack test 生成项目,形成基本结构
npm install 依赖包
npm run dev 运行
我们接下来要做的就是业务相关的了,vue 就是一个个组件往里面加就可以了。
一个简单的vue项目在上面的基础我写了一个简单的vue项目,主要改动的文件如下:
build/webpack.base.config.js
进行loader的配置,以及有一个iview的css文件不进行babel的处理,如下
src/router/index.js: import引入组件文件,根据vue-router写上相应的路由配置
3.src/components:
业务代码集中地,我做了一个简单的,只有三个组件。然后在每个组件中又分成几个组件构成,具体的语法需要自行学习vue
另外这个开发过程需要注意的是我们这个项目是遵循ESLint规则,所以可能运行的时候会报一些错误,但是大多数都是和缩进、空格之类有关的,按照提示修改即可,之后代码会在下一篇发出来。