前公司商城App项目构建预备vue中文文档:构建工具环境

菏泽炫佑科技

前公司商城App项目构建预备vue中文文档:构建工具环境

原公司商城App项目采用H5开发，有微信公众号、IOS三个版本。 H5版本是我自己写的一套框架。 它已经使用了好几年了，无法承受不断出现的新需求。 通过在ios和终端上加载h5文件可以看出，App原生功能与H5交互的代码有点乱。 我接手这个项目之后，老板并没有给我任何重构的时间，所以我只能顺手一点地做出新的功能。 的重建。 后期我们会建设一个与原商场相对独立的新商场，新商场的入口将放在老商场内。 由于时间紧、任务重，如果使用React或weex前公司商城App项目构建预备vue中文文档:构建工具环境，需要对原有项目进行重构后再引入。 考虑到可能存在的各种陷阱，不太可能使用这些解决方案。 使用 Vue 或 React 构建 Web 项目，然后将其嵌入到原始应用程序项目中是*安全的。 *终选择了Vue这个名字，因为它在字符数和音节数上有绝对的优势。

vue项目构建准备

vue中文文档：

搭建工具环境

:

构建工具vue-cli：

如果这是您**次接触vue或者当您将vue引入到现有项目中时，您可以选择使用CDN版本或下载js文件。

vue.js 的生产版本：

介绍CDN版本：

构建项目

如果是新项目，建议使用vue-cli来构建项目，省时省心。

安装好环境后，在终端输入：

npm --vue-cli

进入要存放项目的目录，根据模板新建项目

vue 初始化我的-

其他模板还有pwa,,-,,-等，大家可以自行了解：

构建时有几个选项需要注意：

Vue 构建：

选择+：对于大多数用户

官方解释#--vs-only运行时

vue-：

建议选择文档地址

:

建议选择，模板使用，官网地址

编译并运行

进入项目根目录，打开.json文件，可以看到项目的各种配置。 其下存放着各种命令，可以在命令行通过npm run ***执行。

npm run dev 或 npm start

相当于执行-dev- --build/.dev.conf.js 启动开发环境

在开发中，经常使用.env.***的值来区分不同的环境。环境变量的值在//*.env.js文件中配置。 .dev.conf.js文件中引入的配置文件是dev.env.js。 我们可以判断.env的值是否正确。 正在开发中。 当前环境是否为开发环境

启动后不改变任何配置，在浏览器中输入：8080即可看到效果。

图像

npm 运行构建

执行该命令后，当前项目将被编译并打包。 编译完成后，我们可以在/dist目录下看到我们需要的工程文件。

编译完成后，可以在终端看到这样的温馨提示“不允许直接打开index.html文件访问”。

图像

这意味着不允许将打包后的项目直接放入ios或项目中并使用加载。 我们应该做什么？

让我们偷偷打开/dist/index.html 文件，看看会发生什么？

图像

它一片空白并报告错误。 未找到 css 和 js 文件。 用编辑器打开文件后可以看到这些文件的路径确实存在一些问题，所以我添加了一个. 在路径前面签名，打开时发现页面不再是空白。

图像

但是我们不可能每次编译的时候都手动去修改文件吧？ 显然这可以在编译的配置中设置。

打开//index.js文件，在build{}的配置下找到‘/’的参数配置。 只需将其更改为：'./'。 执行 npm run build 后，资源文件的路径将被修改为 ./ 。

图像

现在无论使用file://还是file://访问都没有问题了，放到ios或者项目中应该也没有问题。

关于地图

编译后，你会发现每个资源文件都有一个对应的.map文件app开发，而且这个文件的大小不小。 在不添加任何代码的情况下将项目文件压缩成zip包后大小为227k。 如果删除.map文件后，就只有50k了。 您可以想象.map 文件对项目大小的影响。

项目编译完成后，我们编写的所有js代码都会被压缩成一个app.***.js文件。 这时候如果某个函数在线报错，.map文件可以帮助我们定位报错的具体函数。 它在哪个文件中？ 不过，大多数情况下，没有必要将.map文件打包放到网上。

打开//index.js文件，找到build{}配置，将其修改为false，这样就不会生成.map文件了。

图像

压缩包装

一般项目中，开发完成后，我们通常会将文件打包成zip文件，这样不仅方便保存和传输，而且也有仪式感。 那么如何在编译完成后自动打包成zip文件呢。

首先我们需要安装一个-zip-工具

npm i -zip- --save-dev

然后打开/build/.prod.conf.js文件，在文件中引入相关包

const WebpackZipPlugin =require('webpack-zip-plugin')

配置添加在：[]：

    new WebpackZipPlugin({
      initialFile: './dist/release/',  //需要打包的文件夹(一般为dist)
      endPath: './dist/release/',  //打包到对应目录（一般为当前目录'./'）
      zipName: 'release.zip' //打包生成的文件名
    })

您可以在 dist 目录中看到 .zip 文件。

关于跨域

如果本地开发时要调用服务端接口，肯定会遇到跨域问题。 这时我们只需要在//index.js文件中添加dev:{}即可。

    proxyTable:{
      '/server': {
        target: 'http://192.168.11.5:3001'
      }
    }

这样我们就可以将路径：8080/的所有请求转发到：3001/

项目关于

IOS和IOS都只是提供了一套接口供开发者调用，实际的工作还是留待完成。 后来在Blink的基础上，根据自己的风格和优化进行了Blink的开发，并用在了自己的浏览器产品中。 从Blink我们可以看到，在优化方面做了很多努力。 不过，我对系统的性能仍然有无法控制的担忧，尤其是当我看到腾讯X5核心标记的技术特性时。 不管怎样，我还是要相信腾讯爸爸说的话，所以demo中就使用了X5核心。

图像

加载vue项目

将Vue项目生成的文件放到项目目录下，使用方法加载

mWebView.loadUrl("file:///android_asset/vue/index.html"); 

关于跨域

如果vue项目有请求服务器数据的功能，可能会出现跨域问题，日志中会发现如下错误

No 'Access-Control-Allow-Origin' header is present on the requested resource.

处理跨域问题很简单，设置为True即可

WebSettings webSetting = mWebView.getSettings();
webSetting.setAllowUniversalAccessFromFileURLs(true);

ios项目加载vue项目

ios可以直接使用或者加载

let mWebView = UIWebView(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))
let path = Bundle.main.path(forResource: "index", ofType: "html", inDirectory: "vue")
let url = URL(fileURLWithPath: path!)
self.view.addSubview(mWebView)
mWebView.loadRequest(URLRequest(url: url))
let mWebView = WKWebView.init(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: UIScreen.main.bounds.height))
    
let path = Bundle.main.path(forResource: "index", ofType: "html", inDirectory: "vue")
    
let url = URL(fileURLWithPath: path!)
self.view.addSubview(mWebView)
mWebView.load(URLRequest(url: url))

演示

:

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等