手把手教你用vue-cli搭建vue项目 (2)

存放的文件不会经过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 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的处理,如下

手把手教你用vue-cli搭建vue项目

src/router/index.js: import引入组件文件,根据vue-router写上相应的路由配置

3.src/components:
业务代码集中地,我做了一个简单的,只有三个组件。然后在每个组件中又分成几个组件构成,具体的语法需要自行学习vue

手把手教你用vue-cli搭建vue项目

另外这个开发过程需要注意的是我们这个项目是遵循ESLint规则,所以可能运行的时候会报一些错误,但是大多数都是和缩进、空格之类有关的,按照提示修改即可,之后代码会在下一篇发出来。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpdgps.html