vue项目搭建成功开发项目细节详解

1.更改端口

更改完端口号重启项目即可。

image.png

2.安装依赖包

• 方法一：直接在终端工具中输入需要安装的依赖包的命令行

npm install vuex --save

• 方法二：在package.json中对应的位置定义好依赖插件名称及版本号，输入命令行即可

npm install

image.png

3.更改打包之后的文件夹名称

输入命令行即可打包

npm run build

打包之后默认的文件名称是dist
更改打包文件名称方式如下

image.png
image.png

4.npm run dev已经成功启动 无法访问 Invalid Host header

详解借鉴：https://www.jianshu.com/p/74546bdb3b02
在 webpack.dev.conf.js 中添加 disableHostCheck: true,

image.png

5添加全局依赖文件

可以在build中建立一个js文件：例如global.js
gloab.js的作用：汇总所有需要全局依赖的文件。

image.png

在webpack中引入和注册，在全局中则不需要重新定义，直接引用即可，例如Pop.method()等

image.png
image.png

6webpack打包根据不同环境区分不同的模板

image.png

vue-cli+webpack生成默认是index.html

image.png

7vue项目中的proxy代理

image.png
image.png