首页 > 代码库 > vue+webpack构建项目

vue+webpack构建项目

1,下载node

在node官网上下载:https://nodejs.org/en/

如果已经下载了,可以查看一下版本 cmd中输入node -v

2,下载npm

可以直接下载npm包管理工具或者安装淘宝镜像

如果已经下载了,可以查看一下版本 cmd中输入npm -v (注意:这个必须要3.0.0以上)

3,安装脚手架vue-cli

npm install -g vue-cli

这个必须安装在全局中

4,新建一个文件夹demo

vue init wenpack demo

这个会出现一些需要自己填写的版本号和用户名之类的。填也可以不填也可以,一直回车就成

技术分享

技术分享

注意:最后一个是单元测试,有的会写,有的不会写。不想写没事

5,打开之前创建的demo

技术分享

6,安装依赖

npm install

7,项目跑起来之后

npm run dev 这样就可以看到实际的效果了 但是这个只能在本地上跑的通

8,怎么实现在服务器中呢?

npm install build

会生成静态文件,在根目录的dist里,里面有个index.html,这是服务器访问的路径指定到这里就可以访问我们自己的项目了。但是我发现个问题就是生成index.html里引用的css和js的引用路径不对,这时候就需要自己修改一下配置了。
进入config/index.js

原始的

技术分享

改成

技术分享

这样在服务器中就可以用了

vue+webpack构建项目