使用vue-cli3.0搭建项目 (pc+h5),及环境配置(反向代理及其他)

1, 本章主要讲解 vue-cli3.0搭建项目及环境配置, 学习前提是安装了node

相关网址 vue官网 https://cli.vuejs.org/zh/

创建项目

1, 新建文件夹,右键打开cmd窗口, 也可以手动通过命令进入目标文件夹

2,根据官网命令新建项目 

            2.1: 安装脚手架 npm install-g @vue/cli

            2.2: 创建项目 vue create my-project

在创建项目过程中, 你可以选择项目所需要的配置, 如下(如选择cli3.0的默认配置则跳过)

2.21,Manually select features

2.22,选择项目具体所需要的配置及特性

我项目所需要的是babel编译,router路由,vuex状态,css预处理,lint代码检测(a全选,i反选,空格则选中当前项)

选择完毕进入下一步

2.23 询问是否需要router历史记录功能, yes即可

2.24 选择css预处理语言, scss和less都可以,任君选择(选择官方默认的dart-sass)

2.25 选择eslint规范(这里选择ESLint+Standard config)

补充说明(后面步骤都完成结束后,会在项目目类看到eslint生成的两个文件)

.eslintignore 类似Git的.gitignore用来忽略一些文件不使用ESLint检查。

.eslintrc.js 是ESLint配置文件，用来设置插件、自定义规则、解析器等配置。

下一步:  Lint on save： 在保存时进行检测    Lint and fix on commit： 在fix和commit是进行检查

2.26 单元测试解决方案(选择jest)

其他确定选择默认项, 直至项目安装成功, 

cd 进入文件夹 输入 npm run serve 运行项目

192为局域网ip

配置反向代理(这里以官网推荐使用的axios配置为例)

涉及的文件有三个 

        vue.config.js   具体代理配置

        http.js             axios的请求变量配置

        .env                域名定义(一般定义2个或三个域名,开发,生产,测试,, 实现ip自动切换)

由于时间有限,不做详细的参数解释

1, vue.config.js文件中 (cli.3.0没有这个文件, 需要在项目根目类新建这个文件)

看不懂, 就对着敲

2,在项目根目录 新建下图的两个文件夹, 

看不懂就对着敲

.env.development 文件中(定义开发环境时,后端给的接口路径)

看不懂就对着敲,没几行, #代表注释,注释的可以不敲

.env.production 文件中(定义生产环境时, 后端的ip)

看不懂就对着敲,把ip替换一下就行

3,在http.js中(自己定义的js文件,你可以随便取名字,放哪里都可以)

3.1 安装引用axios

3.2 http.js中完成一下图中配置

以上三部完成之后 当本地运行的时候,会自动切换到开发环境, 而当通过npm run build打包的时候,会自动切换到生产环境

移动端配置(这里配置rem来实现自适应)

1, 配置meta (index中加入下面一句话)

2,配置rem ()

本章就分享到这里了, 谢谢阅读